Question

我想在自动完成框中显示多个值在我的理解中，JQuery自动完成使用键“值”作为默认值来显示框中的文本但我想显示搜索结果中得到的“值”，“公司”和“标签”键这就是我所拥有的：

我的数据库查询 - 此处仅使用 'value'=＆gt; $ product-＆gt; title 。

public function autoComplete(Request $request) {
    $query = $request->get('term','');

    $products = Products::where('title', 'LIKE', '%' . $query . '%')
                      ->orWhere('company', 'LIKE', '%'. $query .'%')
                      ->orWhere('tags', 'LIKE', '%'. $query .'%')
                      ->get();


    $data=array();
    foreach ($products as $product) {
            $data[]=array('id'=>$product->id, 
                          'value'=>$product->title, 
                          'company'=>$product->company, 
                          'tags'=>$product->tags);

    }
    if(count($data))
         return $data;
    else
        return ['value'=>'No Result Found','id'=>''];
}

我的JQuery自动完成脚本

<script>
$(function()
{
     $( "#search_text" ).autocomplete({
      source: "{{ route('searchajax') }}",
      minLength: 1,
      select: function(event, ui) {
        $('#search_text').val(ui.item.value);
      },
    open : function(){
      $(".ui-autocomplete:visible").css({top:"+=13"});
    },
    });
});

我的输入字段

<div class="col">
<input class="form-control form-control-lg form-control-borderless ui-autocomplete-input" 
id="search_text" 
type="search" 
name="q" 
value="{{ isset($s) ? $s : '' }}" 
placeholder="Search for Titles, Companys or Tags" 
autocomplete="off" />

如果有帮助，我会将Laravel用于此项目。

Answer 1

操纵“价值”并不是最容易的。现场服务器端获得所需的结果？例如像这样

'value'=>$product->title.', '.$product->company.', '.$product->tags);

Answer 2

我自己在帮助下找到了解决方案 JQueryUI Documentation

我不得不操纵 renderItem（）扩展点现在这是我的脚本，完美无缺：

<script>
$(function()
{
     $( "#search_text" ).autocomplete({
      source: "{{ route('searchajax') }}",
      minLength: 1,
      select: function(event, ui) {
        $('#search_text').val(ui.item.value);

      return false;
      },
    open : function(){
      $(".ui-autocomplete:visible").css({top:"+=13"});
    },
    })
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div><strong>" + item.value + "</strong><br>" + item.company + "</div>" )
      .appendTo( ul );
  };
});

JQuery自动完成 - 显示多个值

2 个答案: