自动完成输入字段-JS

Question

我有两个输入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>

Answer 1

是因为您使用的是LIKE语句查找电话号码

Client::where('phone','LIKE','%'.$query.'%')->get();

如果您需要显示具有数字完全相同的用户的名称，则将上述行更改为

Client::where('phone','=',$query)->get();

或

Client::where('phone','LIKE',$query)->get();

编辑：

此外，如果您希望从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输入框中的值

Answer 2

尝试不使用第一个'％'，这样，它将与数字的开始部分匹配，而无需尝试匹配