JQuery 自动完成 - 显示多个值

Posted 2023-05-08

【中文标题】JQuery 自动完成 - 显示多个值

【英文标题】：JQuery autocomplete - Display multiple values

【发布时间】：2018-10-09 19:07:30

【问题描述】：

我想在自动完成框中显示多个值。 据我了解，JQuery 自动完成默认使用键“值”向框显示文本。 但我想显示从搜索结果中获得的键“value”、“company”和“tags”。 这是我所拥有的：

我的数据库查询 - 这里只使用 'value'=>$product->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。

【问题讨论】：

将您的代码粘贴为文本而不是图像。

好的，我会改变它。认为这会更具可读性。

您的第一个查询是否返回正确的数据？ $products = Products::where('title', 'LIKE', '%' . $query . '%') ->orWhere('company', 'LIKE', '%'. $query .'%') ->orWhere('tags', 'LIKE', '%'. $query .'%') ->get();当你尝试 die_dump 时？

是的：i.imgur.com/wtQPF5m.png

我的自动完成功能已经可以使用了，我可以搜索标题、标签、公司。但只是标题显示为结果

【参考方案1】：

操纵“价值”字段服务器端以获得所需结果不是最简单的吗？比如这样

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

【参考方案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 );
  ;
);