Using typescript to get the ID from the value in Laravel

I'm using typescript for the autocomplete search, and as a result I get the name of the value. But in my case I need to get the ID of that value, not the name. Since I'm a newcomer to typescript it's hard for me to make it work. How can I achieve that?

Input:

<input type="text" id="head_id" name="head_id" class="form-control" placeholder="Head is...">

Libraries that I use:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

Script:

<script type="text/javascript">
    var route = "{{ url('autocomplete-search') }}";
    $('#head_id').typeahead({
        source: function (query, process) {
            return $.get(route, {
                query: query
            }, function (data) {
                return process(data);
            });
        }
    });
</script>

Function in the controller:

public function search(Request $request){
        $query = $request->get('query');
        $filterResult = Employee::where('name', 'LIKE', '%'. $query. '%')->get();
        return response()->json($filterResult);
}

tisuchi

3 years ago

Level 70

@ilya_user I think you can do this by using the updater function provided by the typeahead library.

For example:

<script type="text/javascript">
    var route = "{{ url('autocomplete-search') }}";
    $('#head_id').typeahead({
        source: function (query, process) {
            return $.get(route, {
                query: query
            }, function (data) {
                return process(data);
            });
        },
        updater: function(item) {
            return item.id; // this sets the value of the input field to the ID of the selected item
        }
    });
</script>

1 like

Ilya_user

3 years ago

Level 2

@tisuchi thanks it works, but it makes the input show an id when I'm selecting a name, is it possible to show a name in the input while getting an id for the foreign key value?

tisuchi

3 years ago

Level 70

@Ilya_user Probably possible (untested).

<script type="text/javascript">
    var route = "{{ url('autocomplete-search') }}";
    $('#head_id').typeahead({
        source: function (query, process) {
            return $.get(route, {
                query: query
            }, function (data) {
                return process(data);
            });
        },
        display: function(item) { 
            return item.name; // this sets the display text of the input field to the name of the selected item
        },
        updater: function(item) {
            return item.id; // this sets the value of the input field to the ID of the selected item
        }
    });
</script>

Ilya_user

3 years ago

Level 2

@tisuchi still not working

Ilya_user

3 years ago

Level 2

So for now I just changed the post function to this:

$head = Employee::where('name', $input['head_id'])->first();

$result = Employee::create([
            'head_id' => $head->id,
        ]);

But if someone will find out how to do it with typescript, I'll set it as the best answer

Please or to participate in this conversation.