在jquery自动完成中设置值

Posted 2023-05-08

【中文标题】在jquery自动完成中设置值

【英文标题】：Setting the value in jquery autocomplete

【发布时间】：2019-04-21 04:14:13

【问题描述】：

我正在为城市输入框使用 jquery 自动完成，但是当我发送输入时，它发送的是所选城市的名称而不是 id，我如何发送 id 但在使用自动完成时仍然显示名称？

所以本质上我希望自动完成功能是这样的：

id">city->name-/option->

这是我当前的代码：

html：

        <div class="search-homepage-input">
            !! Form::open(['route' => 'search.index', 'method' => 'GET']) !!
            <div class="col-md-9">
            !! Form::text('city', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl')) !!
            </div>
            <div class="col-md-3">
                !! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!
            </div>
            !! Form::close() !!
        </div>

php(Laravel)：

 public function autoComplete(Request $request)

    $query = $request->term;
    $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);
    foreach($res as $cities )
        $usersArray[] = $cities->name;
    
    return response()->json($usersArray);

JS：

 $('#sl').autocomplete(
            source: '/autocomplete'
        )

【问题讨论】：

$usersArray 中可以找到哪些示例数据？如果它是返回一个对象而不是一个数组，你可能会得到不同的结果。

【参考方案1】：

我认为您想要执行以下操作：

public function autoComplete(Request $request)
  $query = $request->term;
  $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);
  foreach($res as $cities )
    $usersArray[] = array(
      "label" => $cities->name,
      "value" => $cities->id
    );
  
  return response()->json($usersArray);

查看以下页面：http://api.jqueryui.com/autocomplete/#option-source

数组： array 可用于本地数据。有两种支持的格式：

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

所以你想像这样返回 JSON：

Array [
  Object 
    "label": "City",
    "value": id
  
];

希望对您有所帮助。

更新

当用户进行选择时，它使用select 回调。在上面的例子中，label 被显示并且用户选择它。然后将value 属性设置为所选项目的value。可以在这里看到：http://jqueryui.com/autocomplete/#custom-data

使用您的自动完成代码，这可能如下所示：

HTML

<div class="search-homepage-input">
  !! Form::open(['route' => 'search.index', 'method' => 'GET']) !!
  <div class="col-md-9">
    !! Form::text('city-name', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl-label')) !!
    !! Form::text('city-id', null, array('class' => 'form-control', 'id' => 'sl-id', 'style' => 'display: none;') !!
  </div>
  <div class="col-md-3">
    !! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!
  </div>
  !! Form::close() !!
</div>

JavaScript

$('#sl').autocomplete(
  source: "/autocomplete",
  focus: function(event, ui) 
    $("#sl-label").val(ui.item.label);
    return false;
  ,
  select: function(event, ui) 
    $("#sl-label").val(ui.item.label);
    $("#sl-id").val(ui.item.value);
    return false;
  
);

这样您就可以收集要用于搜索的 ID。

【讨论】：

那么我将如何更改自动完成以发送它？

@detinu 您不会在自动完成中进行更改。这将是对您的 php.ini 的更改。现在您只是将“姓名”数据发送回自动完成功能。

是的 - 现在下拉菜单显示标签名称，但是当我点击下拉建议时，它会在框中输入 id，我想要的是在框中的名称，但是值是 id，这样当我启动搜索时，它可以带回基于该 id 的搜索

@detinu 好的，然后您需要在 select 回调中执行此操作。