Я следую этой ссылке, чтобы построить автоматическую полную систему с несколькими значениями, используя jquery, php и mysql. например: если я ввожу что-то в поля ввода, он покажет мне результат поиска в поле ввода и снова, если поиск в другом выражении покажет мне другой результат, который покажет результат с запятой отдельно. Как эта ссылка делает: http://jqueryui.com/autocomplete/#multiple-remote . Код выглядит следующим образом:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Multiple, remote</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url("loading-image.gif") right center no-repeat; } </style> <script> $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // custom minLength var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds" size="50"> </div> </body> </html> Php cdoe (Это не совсем полно, потому что я не понимаю, что мне нужно делать на этой странице php).
<?php require_once("../frontend/config.php"); $term = $_GET['term']; $sql = mysqli_query($link, "SELECT family_name FROM contact_details WHERE family_name LIKE '%$term%' "); while($res = mysqli_fetch_array($sql)){ $family_name = $res['family_name']; echo json_encode($family_name); } ?>
Может ли что-то помочь мне в этом, как показать результат поиска, как это делает ссылка? Примечание: Я изучаю Jquery 🙂 Спасибо.
Я сделал это. Код Php должен выглядеть так:
<?php require_once("../frontend/config.php"); $term = $_GET['term']; $sql = mysqli_query($link, "SELECT family_name FROM contact_details WHERE family_name LIKE '%$term%' "); $return_arr = array(); while ($row = mysqli_fetch_array($sql, MYSQL_ASSOC)) { $row_array['label'] = $row['family_name']; //$row_array['value'] = $row['tags_list']; //$row_array['abbrev'] = $row['abbrev']; array_push($return_arr, $row_array); } echo json_encode($return_arr); ?>