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

我暂时没有使用自动完成功能，但我发现代码中存在两个问题。首先，根据docs

自动完成插件不会过滤结果，而是添加一个带有术语字段的查询字符串，服务器端脚本应使用该字段来过滤结果。例如，如果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);
    }
});

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

2 个答案: