[英]autocomplete input fields - JS
我有两个输入name
和phone
输入。 键入电话号码时,客户端的名称应出现在名称输入框中。
在下面的代码中,发生的事情是,当我开始输入一个不存在的新号码时,查询将选择一个号码相似的人的名字。 为什么会这样呢?
我想要的是,如果数字不存在,则查询不应填充我的姓名文本框。
HTML
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" autocomplete="on" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
调节器
public function autocomplete(AutoCompleteFormRequest $request)
{
$query = $request->get('query','');
$client = Client::where('phone','LIKE','%'.$query.'%')->get();
return response()->json($customer);
}
JS
<script type="text/javascript" >
var path = "{{ route('autocomplete') }}";
var obj;
$('input.typeahead').typeahead({
source: function (query,process){
return $.get(path, {query:query},function (data)
{
for(var i = 0; i < data.length; i++) {
obj = data[i];
$("#name").val(obj.name);
}
return process(data);
})
}
});
</script>
这是因为您使用LIKE
语句查找电话号码
Client::where('phone','LIKE','%'.$query.'%')->get();
如果您需要显示与数字完全相同的用户名,请将上面的行更改为
Client::where('phone','=',$query)->get();
要么
Client::where('phone','LIKE',$query)->get();
编辑:
另外,如果您希望在响应中没有返回结果的情况下从name
输入中清除该name
,则应在$.get
内添加以下内容,将其更改为如下所示。
return $.get(path, {
query: query
}, function (data) {
(data.length == 0) ? $("#name").val(''): '';
for (var i = 0; i < data.length; i++) {
obj = data[i];
$("#name").val(obj.name);
}
return process(data);
})
这行(data.length==0)?$("#name").val(''):'';
将跟踪响应中是否没有返回结果,它将清除name
输入框中的值
尝试不使用第一个'%',这样它将与数字的开头部分匹配,而不会尝试与之匹配
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.