Question

好的，所以这就是我遇到的确切问题。我有这个自动完成字段，每当我在其中键入任何内容时，我的控制台会向我显示表格中的每条记录，无论我输入什么，我都可以获得结果。在该字段下方，“结果”列表显示为空白，任何选项中均未显示任何文本。这是我的代码。

自动填充字段

{{ Form::text('busqueda', '', array('class'=>'ui-widget ui-widget-content ui-corner-all', 'id'=>'busqueda')) }}

jQuery

$(document).ready(function(){
    $("#busqueda").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{URL('ajax/getBooksAutocomplete')}}",
                data: {
                    busqueda: this.term
                },
                success: function (data) {
                    // data must be an array containing 0 or more items
                    console.log("[SUCCESS] " + data.length + " item(s)");
                    //response(data);
                    response( $.map( data, function( item ) {
                        return {
                            label: item.name,
                            value: item.id
                        };
                    }));
                },
            });
        },
    });
});

路线

Route::get('ajax/getBooksAutocomplete', array('uses'=>'BookController@getBooksAutocomplete'));

控制器

class BookController extends BaseController {
...
    public function getBooksAutocomplete(){
        $term = Input::get('busqueda');
        $books = array();
        $search = DB::table('books')->where('name', 'LIKE', '%'.$term.'%')->get();
        foreach($search as $results => $book){
            $books[] = array('id'=>$book->id, 'name'=>$book->name);
        }
        return Response::json($books);
    }
...
}

我们将不胜感激。

Answer 1

您是否尝试将id，label，value用作默认数组键？

class BookController extends BaseController {
...
    public function getBooksAutocomplete(){
        $term = Input::get('busqueda');
        $books = array();
        $search = DB::table('books')->where('name', 'LIKE', '%'.$term.'%')->get();
        foreach($search as $results => $book){
            $books[] = array('id'=>$book->id, 'label'=>$book->name, 'value'=>$book->id);
        }
        return Response::json($books);
    }
...
}

这可以让你在javascript端用较少的代码使用自动完成功能。

使busqueda成为隐藏字段以保存选定的自动完成选项，并将buesqueda2保存为自动完成。因此，当您选择busqueda2时，它将使用所选选项更新隐藏的输入buesqueda。所以要这样做，你把它添加到javascript端：

 $("#busqueda2").autocomplete({
  ....
   select: function (event, ui) {
    $('#busqueda2').val(ui.item.label);
    $('#busqueda').val(ui.item.id);
   }
  ....
});

Answer 2

试试这个，这不是准备复制粘贴的代码，它只是一个想法

$(document).ready(function(){
    $("#busqueda").autocomplete(function(){
        $.ajax({
        type: "POST",
        url: "someFileName.pgp",
        data: "searchField="+ui.item['name'];
        }).done(function( result ) {
            $("#someElementToDispalyResult").html(result)
        });
    });
});

编辑我现在看到了

$(document).ready(function(){
    $("#busqueda").autocomplete(function(){
        $.ajax({
        type: "POST",
        url: "someFileName.pgp",
        data: "searchField="+ui.item['name'];
        }).done(function( result ) {
          var options = eval('(' + result + ')');
          var length = options.length;

            for(var j = 0; j < length; j++)
            {
                var newOption = $('<option/>');
                newOption.attr('value', options[j].id);
                newOption.html( options[j].name); 
                $('#mySelect').append(newOption);
            }


        });
    });
});

相应地改变名称

Answer 3

检查此代码，它与我合作很简单

<script>
    $(document).ready(function(e) {
        $("#term").autocomplete({
          source: "{{URL('getautocomplete')}}",
          minLength: 2,
          select: function (event, ui) {
            if (ui.item) {
               $("#term").val(ui.item.value);
               this.form.submit();
            }
          }
        });
   });
</script>

Answer 4

谢谢zam，我在看到你编辑的帖子之前的2分钟就设法找到了解决方案。事实证明，使用Laravel的Form :: text（）的自动完成功能与Yii的CJuiAutoComplete小部件不同。这是我的代码。

观点：

{{ Form::text('busqueda', '', array('class'=>'ui-autocomplete-input ui-widget-content ui-corner-all', 'id'=>'busqueda')) }}
{{ Form::hidden('id_busqueda', '', array('id'=>'id_busqueda')) }}

控制器：

class BookController extends BaseController {
...
    public function getBooksAutocomplete(){
        $term = Input::get('busqueda');
        $books = array();
        $search = DB::table('books')->where('name', 'LIKE', '%'.$term.'%')->get();
        foreach($search as $results => $book){
            $books[] = array('id'=>$book->id, 'value'=>$book->name);
        }
        return Response::json($books);
    }
...
}

jQuery：

$(document).ready(function(){
    $("#busqueda").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{URL('ajax/getBooksAutocomplete')}}",
                data: {
                    busqueda: request.term
                },
                success: function (data) {
                    console.log("[SUCCESS] " + data.length + " item(s)");
                    response(data);
                },
            });
        },
        select: function(event, ui){
            $('#id_busqueda').val(ui.item.id);
        }
    })
});

问题的根源：

我经历了我的一个Yii项目，事实证明我还会返回一个id和一个值，该值包含我要显示的数组部分，在这种情况下会是＆＃34;名称＆＃34;数组中的书籍。
我没有考虑到我正在使用文本字段的事实，在这种情况下，值正是字段中显示的内容，没有办法显示文本在这个领域将是一回事，价值将是另一回事。在我开始思考之前，我正在考虑将文本字段作为下拉列表，其中文本和选项的值是两个不同的东西。
隐藏字段没有取得所选选项的值的原因是我只传递参数＆＃34; item＆＃34;到成功函数，然后把＆＃34; item.id＆＃34;作为隐藏字段的值。现在，我仍然不明白为什么我必须通过＆＃34;事件＆＃34;参数，但＆＃34; ui＆＃34;参数才有意义，因为ui变成了一个数组数组。

Laravel 4.1自动完成字段未显示结果

4 个答案: