php jQuery自动完成在laravel中无法正常工作

Question

我一直在努力为我的位置文本字段添加自动完成功能，问题是当我在其上输入任何单词时，它总是显示所有结果。

这是我的javascript：

<script type="text/javascript">
    $(function(){
        $("#Location").autocomplete({
            source: "{{ route('search.autocomplete') }}",
            minLength: 3,
            select: function(event, ui){
                $("#Location").val(ui.item.value);
             }
        });
    });
</script>

这是 route.php

Route::get('search/autocomplete', ['uses' => 'SearchController@autocomplete', 'as' => 'search.autocomplete']);

这是搜索控制器

public function autocomplete(Request $request){
        $term = $request->get('Location');

        $provinces = DB::table('provinces')->where('ProvinceName', 'LIKE', '%'. $term .'%')
        ->orderBy('ProvinceName', 'desc')
        ->get();

        $results = [];
        foreach ($provinces as $province) {
            $results[] = ['id' => $province->id, 'value' => $province->ProvinceName];
        }
        return response()->json($results);
}

这就是 search.blade.php

<div class="form-group col-md-4">
                Location: {!!Form::text('Location', Request::get('Location'), ['class' => 'form-control', 'placeholder' => 'What is your location?', 'id' => 'Location', 'style' => 'width: 250px;'])!!}
</div>

Answer 1

好的，我解决了我的问题，我改变了

路由.php

Route::get('search/autocomplete', 'SearchController@autocomplete');

搜索控制器

if ($request->ajax()) {
        $term = Input::get('term');

        $results = array();  

        $queries = DB::table('provinces')
            ->where('ProvinceName', 'LIKE', '%'.$term.'%')
            ->take(5)->get();

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

和我的 Javascript

<script type="text/javascript">
    $(function()
    {
         $( "#Location" ).autocomplete({
          source: "{{ url('search/autocomplete') }}",
          minLength: 3,
          select: function(event, ui) {
            $('#Location').val(ui.item.value);
          }
        });
    });
</script>

Answer 2

具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

标签属性显示在建议菜单中。当用户选择一个项目时，该值将插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，则该值也将用作标签。

改变

$results[] = ['id' => $province->id, 'value' => $province->ProvinceName];

到

$results[] = ['value' => $province->id, 'label' => $province->ProvinceName];

和

$("#Location").val(ui.item.value);

到

$("#Location").val(ui.item.label);

在前端使用 id 作为

ui.item.value