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

shayan

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

以下是我的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' );

控制台响应

帕万

我知道我参加聚会迟到了,但是我遇到了这个确切的问题。

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章