Bootstrap-3-Typeahead afterSelect Get ID

Question

I'm using Bootstrap-3-Typeahead here for my autocomplete from mysql. I need to get item_code from selected item_name afterSelect with something like

$('#item_code').val(this.item_code);

unfortunately not working.

My Json output:

[{"item_code":"1","item_name":"A"},{"item_code":"2","item_name":"B"}]

here's my code, please advise

$('input.item_name').typeahead({
                minLength: 3,
                source: function (query, process) {
                    $.ajax({
                        url: 'function/load-item.php',
                        type: 'POST',
                        dataType: 'JSON',
                        data: 'query=' + query,
                        success: function(data) {
                            var newData = [];
                            $.each(data, function(){
                                newData.push(this.item_name);
                                });
                            return process(newData);
                            }
                    });
                },
                afterSelect: function(){
                    $('#item_code').val( ... ... ... ... );
                }
            });

My php code

<?php
session_start();
include ('../include/connect.php');

$query = 'SELECT item_code,item_name FROM master_item';
if(isset($_POST['query'])){
$query .= ' WHERE item_name LIKE "%'.$_POST['query'].'%"';
}

$return = array();
if($result = $conn->query($query)){
    // fetch array
    while ($row=mysqli_fetch_assoc($result))
    {
        $return[] = $row;
    }

    // free result set
    $result->close();
    // close connection
    $conn->close();

    $json = json_encode($return);
    print_r($json);
}

?>

Batista

Answer 1

Try Using typeahead:selected instead of afterSelect it returns the whole object where you can get your required value i.e. .item_code . I have created this fiddle , you can see the working example there.

$('.typeahead').on('typeahead:selected', function (e, datum) {
    console.log(datum);
    $('#item_code').val(datum.item_code);
});

Edington

thanks for reply mate. it perfectly works with your example. but i need to use a remote data from php. can you help me? I'm trying to adapt this example link but no luck. Please advise, thank you – Batista

I have updated the fiddle that you provided, it works here. jsfiddle.net/UkB7u/1339 – Edington

hey mate, i need your help again. after copying your code and changing the url to mine above, the typeahead always shown 5 first row, and filter not working. please help again, thanks before – Batista

Can you provide me the code? I mean the one that's not working. – Edington

I change the url into my url : function/load-item.php. as i wrote above on my question. – Batista

What problem you are facing? Can you go to your browser console and tell me if there is any error shown there? – Edington

Uncaught TypeError: Cannot read property 'length' of undefined – Batista

Let us continue this discussion in chat. – Edington

Answer 2

This is for the benefit of those who might have the same problem in the near future. Below is another simple approach to getting the same functionality using JQuery and bootstrap-3-typeahead.js or bootstrap-3-typeahead.min.js:

Example

var url = "codePath/searchCode.php";
$('.typeahead').typeahead({
    source: function (query, process) {
      return $.get(url, { query: query }, function (data) {
        console.log(data)
	    return process(data);
	  });
    },
    //this triggers after a value has been selected on the control
    afterSelect: function (data) {
      //print the id to developer tool's console
      console.log(data.id);
    }
});

Seize

Found a lot of .on('typeahead:selected' .... answers, but nothing worked until this. Thank you Deen_Kadir – Tiedeman

@deen_kadir You are the real champ. Thanks a lot – Mannerism

Answer 3

replying on old thread, your code seems to be good, you just missed the argument to the afterSelect callback

$('input.item_name').typeahead({
            minLength: 3,
            source: function (query, process) {
                $.ajax({
                    url: 'function/load-item.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: 'query=' + query,
                    success: function(data) {
                        var newData = [];
                        $.each(data, function(){
                            newData.push(this.item_name);
                            });
                        return process(newData);
                        }
                });
            },
            afterSelect: function(args){
                $('#item_code').val(args.item_code );
            }
        });

Talbott