使用jquery-ui自动完成搜索-不起作用

Question

当我填写搜索框时，自动完成功能无法正常运行。 我的查询不起作用。

以下是我的html代码：

 $(document).ready(function(){ $('#keyword').autocomplete({ source: function( request, response ) { $.ajax({ url : '/search', dataType: "json", data: { username: request.term }, success: function( data ) { response( $.map( data, function( item ) { return { id: '<B>' + item.id + '</B>', value: item.value } })); } }); }, autoFocus: true, minLength: 2, select: function(event, ui) { var url = ui.item.id; if(url != '#') { location.href = '/admin/users/' + url+ '/edit'; } }, html: true, open: function(event, ui) { $(".ui-autocomplete").css("z-index", 1000); } }); }); 

 <input name="keyword" id="keyword" class="form-control txt-auto"/> 

我的功能

public function search(Request $request) {
        $keyword = $request->input('keyword');
        $results = array();
        $user = User::where('username', 'LIKE','%'.$keyword.'%')->get();

        foreach ($user as $query)
        {
        $results[] = [ 'id' => $query->id, 'value' => $query->username ];
    }
    return Response::json($results);
    }

Route::get( '/search' , 'ShopController@search' );

Answer 1

我知道我晚会晚了，但是我遇到了这个问题。

加载html时需要添加z-index：

我所做的是将其添加到我的一个CSS文件中：

.ui-autocomplete {
    z-index:2147483647;
}

之后，自动完成功能开始工作。

Answer 2

我已经有一段时间没有使用自动完成功能了，但是我在您的代码中看到了两个问题。 首先，根据文档

Autocomplete插件不会过滤结果，而是会在查询字符串中添加一个term字段，服务器端脚本应使用该字段来过滤结果。 例如，如果将source选项设置为“ http://example.com ”，并且用户键入foo，则将向http://example.com?term=foo发出GET请求。 数据本身可以采用与上述本地数据相同的格式。

但是，您正在使用：

$keyword = $request->input('keyword');

代替

$term = $request->input('term');

其次，也许您需要在source选项内部进行ajax调用，但是您可以执行以下操作：

$('#keyword').autocomplete({
    source: "/search",
    select: function(event, ui) {
        // ... do something here. Try logging the output
        console.log(ui.item);
    }
});