jQuery Autocomplete (Remote) – пример

Я действительно надеялся избежать публикации нового вопроса, но я не могу найти функционирующий пример функции автозаполнения jQuery, включающей как вызывающую страницу, так и страницу поиска. В разделе «Демо и документация jQueryUI» не содержится источник «search.php»,

Я пробовал десятки комбинаций, но вот что я начал с:

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

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

У кого-нибудь есть фрагменты кода, которые показывают обе стороны этого уравнения, что они могут делиться? Большое спасибо за любую помощь, которую вы можете предоставить.

Вот правильный код для 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));

Некоторые ключевые моменты

Термин слова нигде не встречается на странице вызова образца, заданной jqueryui, но это имя, указанное в Querystring
Вы должны создать массив значения, а затем json закодировать перед возвратом

Надеюсь, это поможет некоторым людям в будущем!

Есть несколько более крупных учебных пособий, когда вы google для «Учебного урока автозаполнения jQuery UI», я полагаю, что это может быть полезной: http://www.google.com/search?q=jqueryUIautoocomplete+tutorial

Вот урезанная версия автозаполнения, которое я использовал ранее. У меня может быть ошибка или два, так как я вырезал код.

На сервере:

  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.'; }

Сценарий:

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

И на странице XHTML:

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

Замечания по поводу «скорости приема» не нужны, поэтому более полезно опубликовать это для Google, чем для репутации.

Я сделал php, как и он был успешным, я использовал метод mysqli.

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