JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//underscorejs.org/underscore-min.js"></script>
ชื่อบริษัท : <input type="text" id="typeahead" data-provide="typeahead" />

หมวดสินค้า : <input type="text" id="getProduct" />

CSS

body {
    padding: 10px;
}

JavaScript

$('#typeahead').typeahead({
    source: function(query, process) {
        // This is where your ajax call would be
        objects = [];
        map = {};
        var data = [
            {"id":1,"label":"ไทย เรยอน","value":"อาหาร"},
            {"id":2,"label":"ไทยรุ่ง อินเตอร์ บิส","value":"เครื่องดื่ม"},
        ];
        $.each(data, function(i, object) {
            map[object.label] = object;
            objects.push(object.label);
        });
        process(objects);
    },
    updater: function(item) {
        $('#getProduct').val(map[item].value);
         return item;
    }
});