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

尝试不使用第一个'％'，这样它就会匹配数字的开头部分而不尝试匹配

自动完成输入字段 - JS

2 个答案: