www.webdeveloper.com
Results 1 to 2 of 2

Thread: Autocomplete Multiple fields php MYSQL

  1. #1
    Join Date
    Apr 2011
    Posts
    1

    Autocomplete Multiple fields php MYSQL

    Hi All

    I'm sure this is simple but driving me mad...

    I'm trying to use autocomplete on multiple fields within the same page.

    I have the following Autocomplete script:
    Code:
    <script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup
    
    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
    function fill2(thisValue) {
        $('#inputString2').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
    Used with the following HTML:
    Code:
    <tr><td><input type="text" size="50" name=line1 value="" id="inputString"
    onkeyup="lookup(this.value);" onblur="fill();">
    <div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /><div class="suggestionList" id="autoSuggestionsList">&nbsp;</div></td></tr>
    
    
    <tr><td><input type="text" size="50" name=line1 value="" id="inputString2"
    onkeyup="lookup(this.value);" onblur="fill2();">
    <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div>
            </div></td>
    If you look at the JS at the top I presumed that by making two functions assigning data to two fields with different IDs would allow me to have autocomplete on each field (which works ok) but when I make a choice it always populates the first text box, regardless of which input box I start from...

    Meaning, if i start typing in box 1(id inputString), then make a choice from the autocomplete suggestions, box 1 gets filled. But If I start typing in box 2(id inputString2) and get suggestions, click a suggestion, still box 1(id inputString) gets populated and not box 2(id inputString2).

    Any help would be appreciated.

    Regards

    Darren
    Last edited by Kor; 04-04-2011 at 07:29 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    A certain id must be unique on document. You can not have more elements with the same id.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles