autocomplete input fields - JS

Question

I have two inputs name and phone inputs. When I type a phone number, the name of the of the client should appear in the name input box.

With my code below, what happens is, when i start typing a new number which doesn't exist, the query selects the name of a person whose number is similar. Why is this happening?

What I want is, if the number doesn't exist, the query should not populate my name textbox.

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>

Controller

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>

Because that's what you seem to be doing inside the controller. Loose the '%'s and it should work as you want. — Nijraj Gelani
– Nijraj Gelani, Commented Nov 23, 2017 at 16:24

Muhammad Omer Aslam · Accepted Answer · 2018-09-05 23:59:04Z

1

its because you are using LIKE statement for finding phone numbers

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

if you need to show the names of the users who have the exact same match of the number change the above line to

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

or

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

EDIT:

Additionally if you want the name to be cleared from the name input if there are no results returned in the response you should add the following inside the $.get change it to look like following.

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);
})

This line (data.length==0)?$("#name").val(''):''; will track if there are no results returned from the response it will clear out the value in the name input box

edited Sep 5, 2018 at 23:59

answered Nov 23, 2017 at 16:24

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LearnLaravel Over a year ago

now when i clear the phone input box, the name input still remains. when i begin clearing the phone input box, the name should clear out

Muhammad Omer Aslam Over a year ago

what do you mean by name input still remains which name are you talking about and which of the above solution are you using LIKE or =

LearnLaravel Over a year ago

i am using Client::where('phone','LIKE',$query)->get(); When i type in a number, the name shows now. But when i start clearing the phone number, the name in the name input must also clear out

Muhammad Omer Aslam Over a year ago

ahh you mean the other input name, let me update the answer

Mackija · Accepted Answer · 2017-11-23 16:27:58Z

0

Try not using the first '%', that way it'll match the beginning portion of the number without trying to match within

answered Nov 23, 2017 at 16:27

Mackija

3172 silver badges14 bronze badges

Collectives™ on Stack Overflow

autocomplete input fields - JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related