CODEWITHSUNDEEP
twitter-bootstrapbootstrap-typeahead
vincmeister
vincmeister

Reputation: 191

Bootstrap-3-Typeahead afterSelect Get ID

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

?>

Upvotes: 6

Views: 14778

Answers (3)

JustAnotherProgrammer
JustAnotherProgrammer

Reputation: 146

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

Upvotes: 2

Eldeeno
Eldeeno

Reputation: 301

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

Upvotes: 7

geekowls
geekowls

Reputation: 627

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

Upvotes: 5

Related Questions