具有自动完成功能的搜索框 jQuery - 更新

Question

我正在尝试实现具有自动完成功能的即时搜索框 (jQuery)。正在从数据库中获取数据。我可以看到它正在通过，但由于某种原因，自动完成功能无法正常工作。

HTML

<div class="ui-widget">
  <label style="color: white" for="searchBar">Skills: </label>
  <input id="searchBar">
</div>

PHP - 超薄框架

$app->get('/ajaxsearchbox', function() {

    //$query = $_REQUEST['query'];
    $query = $_GET['query'];

    if (isset($query)) {

        $sql = DB::query("SELECT * FROM players WHERE playerName LIKE '%$query%'");

        foreach ($sql as $result[]) ;
    };
    echo json_encode(array("result" => $result));
});

jQuery

$(document).ready(function() {
  $( "#searchBar" ).autocomplete({
    source: function(request, response) {
      $.getJSON("/ajaxsearchbox",{ query:request.term},response);
    },
    minLength: 0   
  });   
})

Answer 1

使您的 Get 请求 return 更简单的数据

$app->get('/ajaxsearchbox', function() {

    //$query = $_REQUEST['query'];
    $query = $_GET['query'];

    if (isset($query)) {

        $sql = DB::query("SELECT * FROM players WHERE playerName LIKE '%$query%'");

        foreach ($sql as $result[]) ;
    };
    echo json_encode($result);
});

在此之后，在您的 Jquery 自动完成中添加自定义渲染，例如：

$(document).ready(function() {
    $( "#searchBar" ).autocomplete({
        source: function(request, response) {
            $.getJSON("/ajaxsearchbox",{ query:request.term},response);
        },
        minLength: 0,
        select: function( event, ui ) {
            $( "#searchBar" ).val( ui.item.playerName );
        },
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
       return $( "<li>" )
       .append( "<div>PlayerName : " + item.playerName + "</div>" )
       .appendTo( ul );
     };
   } );

}

)

检查此 link 以了解有关处理自定义数据的更多信息 http://jqueryui.com/autocomplete/#custom-data

具有自动完成功能的搜索框 jQuery - 更新

Search Box with autocomplete jQuery - Update

jquery

jquery-ui-autocomplete

HTML

PHP - 超薄框架

jQuery