jQuery Autocomplete (Remote) - example

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 and the "search" page. The jQueryUI "Demos & Documentation" section doesn't include the source of "search.php"

I've tried dozens of combinations, but here's what I started with:

<style>
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
    </style>
    <script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

        $( "#birds" ).autocomplete({
            source: "search.php",
            minLength: 1,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div>

and search.php:

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

    $query = mysql_query("select FIELD from TABLE where开发者_开发问答 FIELD like '%$q%'");
    while ($row = mysql_fetch_array($query)) {
    echo json_encode($row);
}

Does anyone have code snippets that show both sides of this equation that they can share? Thanks so much to any help you can provide.

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!

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

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.

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

?>