Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Autocomplete Twice

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    ??? Sure it does!

    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.

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Thank you

    Thanks, I will look into those alternatives!

    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?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Any ideas?

    Great thank you, I'll do that. Any functions in particular I should look into or just explore around?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •