jQuery Autocomplete (Remote) - example

Question

I was really hoping to avoid posting a new question, but I cannot find a functioning example of the jQuery Autocomplete Remote feature that includes both the calling page an

Answer 1

There are a couple of larger tutorials when you google for 'jQuery UI Autocomplete Tutorial', I suppose on of these might be of any help: http://www.google.com/search?q=jqueryUI+autocomplete+tutorial

Answer 2

Here is the correct code for search.php:

    $conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
    mysql_select_db("DATABASE", $conn);
    $q = strtolower($_GET["term"]);

$return = array();
    $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
    while ($row = mysql_fetch_array($query)) {
    array_push($return,array('label'=>$row['FIELD'],'value'=>$row['FIELD']));
}
echo(json_encode($return));

Some key points

• The word term is nowhere in the sample calling page given by jqueryui, but this is the Querystring name used
• You must create an array of the value, and then json encode before returning

I hope this helps some folks out in the future!

Answer 3

I did the php like & it was successful, I was using mysqli method.

    $q = strtolower($_GET["term"]);

    $return = array();
    $query = "select name from students where name like '%$q%'";
    $result=$conn->query($query);
            while ($cresult=$result->fetch_row()){array_push($return,array('label'=>$cresult[0],'value'=>$cresult[0]));
    }
    echo(json_encode($return));

?>

Answer 4

Here is a trimmed version of an autocomplete I have previously used. Might have an error or two since I cut some code out.

On the server:

    if(isset($_POST['queryString'])) {
    $queryString = $_POST['queryString'];
    $html = '';

    if(strlen($queryString) >1) {
        $names= explode(" ", $queryString ); 
        foreach ($names as &$value) {
            // step 1: first names
            $result= queryf("SELECT *, 
                    MATCH(productName, productTags, productCategory, productOneLine) 
                    AGAINST ('*$queryString*' IN BOOLEAN MODE) 
                    AS score FROM products
                    WHERE MATCH(productName, productTags, productCategory, productOneLine) 
                    AGAINST ('*$queryString*' IN BOOLEAN MODE)
                    AND productStatus='1'
                    ORDER BY score DESC
                    LIMIT 10") ;
            if($result) {
while ($row = mysql_fetch_array($result)) {
                            echo '<li onclick="location.href=\'/'.$row['productCategory'].'/'.$row['productSlug'].'/\';" style="cursor: pointer;"><a href="/'.$row['productCategory'].'/'.$row['productSlug'].'/">
                            <div class="resultImg"><img src="/image.php?width=24&height=24&image='.$row['productIcon'].'" /></div> 
                            <span class="productName">'.$row['productName'].'</span><br />
                            '.$row['productOneLine'].'</a></li>';
                        }

                    }
        } else {
                    echo '
                <ul>
                    <li>
                    <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> 
                    <span class="productName">Processing...</span><br />
                    Please keep typing while we process your code</li>
                </ul>';
                }
        }
    } else {
        echo '
                <ul>
                    <li>
                    <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> 
                    <span class="productName">Processing...</span><br />
                    Please keep typing while we process your code</li>
                </ul>';
    }
} else {
    echo 'Nothing to see here.';
}

The script:

function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $('#country').addClass('load');
        $.post("/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#country').removeClass('load');
            }
        });
    }
}
function fill(thisValue) {
    $('#country').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);
}

And on the XHTML page:

<div id="bg_searchMain">
                        <form id="form" action="#">
                        <input type="text" style="float:left; display:inline; width:430px; margin:5px 0 0 5px; background:none; border:none;" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" autocomplete="off" />
                        <!--<img src="images/button_search.gif" alt="Find" id="button_search" />-->
                        <div class="suggestionsBox" id="suggestions" style="display: none;">
                            <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
                        </div>

                        </form>
                    </div>

The comments about "acceptance rate" are unnecessary it's more useful to post this for Google than for reputation.