So I found this code and I've manipulated it a little bit for what I want. It was designed to autocomplete an input field when countries were typed, but I changed the values to match ingredients or cooking terms, etc.
I was wondering if it would be possible through javascript to autcomplete a word after one is already typed in the input field. For instance, if one person types an 'f' into the input field it will suggest 'flour' as an autocomplete, but if the person types 'f' again, it will not perform the same autocomplete function. How would you go about doing that? Thank you!
Code:
<head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
countries = new Array(
"flour",
"cup",
"tsp.",
"tbsp.",
"lb.",
"pound",
"tablespoon",
"teaspoon",
"sugar",
"olive oil",
"vegetable oil",
"gallon",
"quart",
"qt."
);
var sug = "";
var sug_disp = "";
function getCountry() {
var input = document.forms['address_frm'].country.value;
var len = input.length;
sug_disp = ""; sug = "";
if (input.length) {
// get matching country from array
for (ele in countries)
{
if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
{
sug_disp = input + countries[ele].substr(len);
sug = countries[ele];
break;
}
}
}
document.forms['address_frm'].sug_country.value = sug_disp;
if (!sug.length || input == sug_disp)
document.getElementById('sug_btn').style.display = "none";
else
document.getElementById('sug_btn').style.display = "block";
}
function setCountry() {
document.forms['address_frm'].country.value = sug;
hideSug();
}
function hideSug() {
document.forms['address_frm'].sug_country.value = "";
document.getElementById('sug_btn').style.display = "none";
}
</script>
</head>
<body>
<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
<div></a>
<div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
<input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
</div>
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
<input autocomplete="off" type="text" name="country" style="background: none; color:#000; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
</div>
<div id="sug_btn" style="position: absolute; top: 2px; right: 5px; z-index: 4; display:none;">
<p onclick="setCountry()" style="cursor:pointer">></p>
</div>
</div>
</form>
</div>
</div>
</body>
Type "t". Notice that it displays "tsp".
Then type "b". Notice the it now displays "tbsp".
Nothing happens when you type "ff" because there is nothing in your list that starts with "ff".
This isn't the cleverest of autocomplete systems, as it only shows you the *first* of the array elements that matches the input. What you would want to see in a better system would be that you could type "t" and it would show you both "tsp" and "tbsp" below the <input> so you could know to type another letter to select 'tbsp". Or, even better, it should allow the user to click on one of the choices to pick it.
But, what I mean is that after one word is completely typed in the input field (say 'flour'), then when another word is typed, it will not autocomplete. Can this be fixed?
In other words, you'd like to be able to hit "f" for "flour", then click on the > that accepts that, then type 2 and then type "t" and end up with "flour 2 tsp"?
Yeah, I think it could be done, but not by just making minor mods to that code. I'd start from scratch and rethink how you want it to work.
I think you could start from that code, but maybe do this:
-- when you detect a TAB key, that signals that the user wants to accept the suggested word (so you don't have to click on the > outside of the text box)
-- so you replace the TAB with a space and then start the process all over
-- the only real difference being that you only look at the part of the input text box that is *AFTER* the last space
(If you wanted, you could use SPACE instead of TAB, then you don't even have to alter the key that the user typed.)
Before you post, read our: 
