jquery - 在jquery自动完成中设置值
问题描述
我正在将 jquery 自动完成用于城市的输入框,但是当我发送输入时它发送所选城市的名称而不是 id,我如何发送 id 但在使用自动完成时仍显示名称?
所以本质上我希望自动完成是这样的:
< -option value="{{$city->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'
})
解决方案
我认为您想要执行以下操作:
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。
推荐阅读
- c - 跨多个文件的冲突类型的函数
- typescript - 输入接口 a 或接口 b,但不是两者的并集
- java - 是否有一个函数可以计算 Java 中每个循环的迭代次数?
- excel - 获取 IE 自动化错误“对象变量或未设置块变量”
- node.js - Express 路由器不等待 forEach 循环
- reactjs - Material-UI.com 自动完成样式
- javascript - 在解析 json 数据上放置小数位并在模态输入中显示
- excel - 您可以更改 AutoFilter 方法的条件吗?
- python - 在 DataFrame 中查找第二次出现的正则表达式
- linux - 如何在 WSL 中添加自定义起始目录