ajax autocomplete for multiple textbox

Question

I have done autocomplete for my php code usign ajax.I used this code for autocompleting one fileld.Can I use the same code for autocompleting more than one field...

Code contains ajax code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Autocomplete.....</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<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);
    }

</script>

<style type="text/css">

    body 
    {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }

    h3 
    {
        margin: 0px;
        padding: 0px;   
    }

    .suggestionsBox 
    {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList 
    {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li 
    {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover 
    {
        background-color: #659CD8;
    }

</style>



</head>

<body>


<div>
        <form>
            <div>
                Type your county:
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
            </div>

            <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>
        </form>
    </div>
</body>
</html>

Code for database connection page is

<?php

$con=mysql_connect("localhost","root","");
mysql_select_db("name",$con);

if(!$con) 
{
        echo 'ERROR: Could not connect to the database.';
}
else 
{
        if(isset($_POST['queryString'])) 
        {

        $queryString = mysql_real_escape_string($_POST['queryString']);

        if(strlen($queryString) >0) 
        {

        $query = mysql_query("SELECT cname FROM country WHERE cname LIKE '$queryString%' LIMIT 10");
                if($query) 
                {
                    while($result= mysql_fetch_object($query))
                    {

        echo '<li onClick="fill(\''.$result->cname.'\');">'.$result->cname.'</li>';
                    }
                } 
                else 
                {
                    echo 'ERROR: There was a problem with the query.';
                }
        } 
        else 
        {
                // Dont do anything.
        }
        } 
        else 
        {
            echo 'There should be no direct access to this script!';
        }
}

?>

Jarrett Barnett · Accepted Answer · 2012-04-12 08:22:07Z

Yes, you can use the code to autocomplete more than one field.

The quick and dirty way:

HTML:

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString3" onkeyup="lookup(this.value);" onblur="fill(this);" />

Javascript:

function fill(element,thisValue) 
{
    element.value = thisValue;
    setTimeout("$('#suggestions').hide();", 200);
}

The jQuery and more efficient way (based on your jQuery version 1.2.1:

HTML:

<input type="text" size="30" value="" class="autoupdate" name="field1" />
<input type="text" size="30" value="" class="autoupdate" name="field2" />
<input type="text" size="30" value="" class="autoupdate" name="field3" />

Javascript (using jQuery 1.2.1):

// fill on blur!
$(".autoupdate").blur(function()
{ 
    $(this).val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
});

// lookup value onkeyup!
$(".autoupdate").keypress(function()
{
    var fieldvalue = $(this).val();
    if ( fieldvalue.length > 0 )
    {
        // hide selections box
        $('#suggestions').hide();

    } else {

        $.post("rpc.php", {queryString: ""+fieldvalue+""}, function(data)
        {
            if(data.length >0) 
            {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });

    }
});

Further optimizations:

AJAXing a URL as you keypress is unnecessary. If you don't mind an extra second to auto-fill; it would be better to submit PHP forms onblur instead. Additionally, you can also take advantage of JSON and essentially get all the data you need in one single AJAX call which as a end result makes the form's footprint have 1 AJAX call and 1 MySQL database query. Otherwise, your simply pounding the server on each keyup event that is fired.

-- OR --

Alternatively you can setup a delay that waits 2-3 seconds before submitting the PHP form. It would then also need to ensure that the setTimeout is cleared upon additional keypresses so as to prevent unnecessary pileup of delayed AJAX calls.

Baz1nga · Accepted Answer · 2012-04-12 07:45:33Z

So it all depends on your requirement, I dont see a need where autocomplete for one field will help with autocompleting another field in the same page.. Also, what are the chances that the user will enter the same string..

having said that you can be smart about it and store the response from your server in an associative array and check this associative array first before making a call to the sever to see if you can provide data from that, but for that I would recommend you store JSON data from the server and build the HTML using javascript (eg. templates). You can still store the html in the associative array but the html might change depending on your text box.

Code will probably look like this:

<script type="text/javascript">
    var searchResults=[];
    function lookup(inputString) 
    {
        if(inputString.length == 0) 
        {
            // Hide the suggestion box.
            $('#suggestions').hide();
        }
        else if(searchResults[inputString])
        {
           $('#suggestions').show();
           $('#autoSuggestionsList').html(searchResults[inputString]);
        }
        {

            $.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);
    }

</script>

Obviously you need to change your selectors/ or change the offset of the div etc based on which field you wanna give the autosuggest to.

Hope this helps.

Collectives™ on Stack Overflow

ajax autocomplete for multiple textbox

2 Answers 2

The quick and dirty way:

The jQuery and more efficient way (based on your jQuery version 1.2.1:

Further optimizations:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The quick and dirty way:

The jQuery and more efficient way (based on your jQuery version 1.2.1:

Further optimizations:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related