ट्विटर बूटस्ट्रैप typeahead ajax उदाहरण

Question

मैं ट्विटर बूटस्ट्रैप टाइपहेड तत्व का एक कार्यशील उदाहरण खोजने की कोशिश कर रहा हूं , जो इसे ड्रॉपडाउन करने के लिए अजाक्स कॉल करेगा।

मेरे पास एक मौजूदा कामकाजी jquery स्वतः पूर्ण उदाहरण है जो ajax url को परिभाषित करता है और उत्तर को कैसे संसाधित करता है

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

इसे मुझे टाइपियाहेड उदाहरण में बदलने के लिए क्या बदलाव की आवश्यकता है?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

मैं हल करने के लिए ' टाइप करेंहेड के लिए रिमोट सोर्स ऐड सपोर्ट ' का इंतजार करने जा रहा हूं ।

Comments

अधिक विशिष्ट होने के लिए मैं यह सोच रहा हूं कि टेक्स्टहेड विकल्पों के लिए स्वत: पूर्ण विकल्प और परिणाम हैंडलिंग फ़ंक्शन मैप कैसे हो सकता है? क्या परिभाषित टेक्स्टलर्ट परिणाम हैंडलिंग फ़ंक्शंस का एक सेट है जिसे ओवरराइड किया जा सकता है, या अंतर्निहित jquery एपीआई से विरासत में मिली विधि का नाम है।

— पन्नाध्वज

क्या आप Stijn Van Bael के उत्तर को अब सही मान सकते हैं? बोगर्ट का जवाब केवल बूटस्ट्रैप के पुराने संस्करणों के लिए काम करता है।

— जाइल्स रॉबर्ट्स

Answer 1

संपादित करें: टाइप-हेड अब बूटस्ट्रैप 3 में बंडल नहीं है। देखें:

• बूटस्ट्रैप 3 आरसी 1 में टाइपहेड जावास्क्रिप्ट मॉड्यूल कहां है?
• typeahead.js

बूटस्ट्रैप 2.1.0 से 2.3.2 तक, आप ऐसा कर सकते हैं:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

इस तरह JSON डेटा का उपभोग करने के लिए:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

ध्यान दें कि JSON डेटा सही माइम प्रकार (एप्लिकेशन / json) का होना चाहिए, इसलिए jQuery इसे JSON के रूप में पहचानता है।

Comments

जैसे कि Typeahead कांटा में, डेटा स्ट्रिंग का JSON सरणी होना चाहिए और सामग्री प्रकार अनुप्रयोग / json होना चाहिए।

— Stijn Van Bael

2.1 json का उपयोग कर सकते हैं जो सिर्फ एक स्ट्रिंग सरणी नहीं है? मुझे उपयोगकर्ता के लिए इतना मूल्य चाहिए और आगे की प्रक्रिया करने के लिए एक आईडी का उपयोग करना चाहिए। एक कस्टम कांटा उठा के बिना यह संभव है?

— एंटोन

@Stijin इस बात का कोई उदाहरण है कि एक प्रदर्शन विकल्प के लिए एक आईडी को संसाधित करने के लिए उस अनाम फ़ंक्शन का उपयोग यहां कैसे किया जाएगा? धन्यवाद!

— एकरा

मैं यह बताना चाहता हूं कि इस विधि का उपयोग करके इनपुट में प्रत्येक कीस्ट्रोक के लिए AJAX कहा जाता है । यदि सर्वर अनिवार्य रूप से स्थैतिक डेटा लौटा रहा है (यानी वास्तव में क्वेरी के साथ कुछ भी नहीं कर रहा है), तो यह काफी बेकार हो सकता है।

— ११:१५ बजे

के getबजाय का उपयोग क्यों करें getJSON? यह अधिक उचित लगता है।

— greg0ire

Answer 2

आप BS Typeahead फोर्क का उपयोग कर सकते हैं जो ajax कॉल का समर्थन करता है। तब आप लिख पाएंगे:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

Comments

जब मैं वापस लौटा तो POST डेटा के रिटर्न प्रकार के लिए jQuery का "बुद्धिमान अनुमान" काम नहीं कर रहा था, उदाहरण के लिए ["aardvark", "apple"],। मुझे स्पष्ट रूप dataTypeसे $.postकॉल में पैरामीटर सेट करना था । JQuery.post () देखें ।

— रस्टी फॉसक

वैकल्पिक रूप से @rfausak, Content-typeapplication/json

— Rusty Fausak

मैं बिना पढ़े टाइप टाइप हो रहा हूं: अपरिभाषित का 'कॉल टू कलेवर' नहीं लिख सकता

— वर्मा

आपके द्वारा भेजे गए लिंक में, मुझे sourceकार्य निष्पादित करने के लिए भी नहीं मिल रहा है ।

— जेम्स

अच्छा उत्तर! मैं REST मानकों को पूरा करने के बजाय, GET अनुरोध का उपयोग करूंगा।

— मौरो

Answer 3

बूटस्ट्रैप 2.1.0 से शुरू:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

जावास्क्रिप्ट:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

अब आप अपने HTML-कोड में "json-request" लिंक रखकर एक एकीकृत कोड बना सकते हैं।

Comments

लेकिन मैं इसे इस्तेमाल करने के लिए बदल दूंगा $(this)[0].$element.data('link')।

— एंड्रयू एलिस

याthis.$element.data('link')

— रिचर्ड्सन 87११

Answer 4

सभी प्रतिक्रियाएँ बूटस्ट्रैप 2 टाइप-हेड का उल्लेख करती हैं, जो अब बूटस्ट्रैप 3 में मौजूद नहीं है।

किसी अन्य व्यक्ति के लिए यहां नए पोस्ट-बूटस्ट्रैप ट्विटर टाइपरहेड.जैस का उपयोग करके AJAX उदाहरण की तलाश में है , यहां एक कार्यशील उदाहरण है। वाक्यविन्यास थोड़ा अलग है:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

यह उदाहरण सिंक्रोनस ( प्रोसेससिंक कॉल ) और अतुल्यकालिक सुझाव दोनों का उपयोग करता है , इसलिए आपको तुरंत कुछ विकल्प दिखाई देंगे, फिर अन्य जोड़े जाएंगे । आप बस एक या दूसरे का उपयोग कर सकते हैं।

बहुत सी बाइंड करने योग्य घटनाएँ और कुछ बहुत ही शक्तिशाली विकल्प हैं, जिनमें तार के बजाय वस्तुओं के साथ काम करना शामिल है, इस स्थिति में आप अपने आइटमों को पाठ के रूप में प्रस्तुत करने के लिए अपने स्वयं के कस्टम प्रदर्शन फ़ंक्शन का उपयोग करेंगे।

Comments

धन्यवाद। एक और प्रश्न: processAsync के साथ मुझे "TypeError: सलाहें मिल रही हैं ।lice एक फ़ंक्शन नहीं है।" लौटे JSON को भी कैसा दिखेगा? यहां मेरा सबसे अच्छा अनुमान है: {: सुझाव => ["थिंग 1", "थिंग 2", "थिंग 3"]}

— user1515295

सुनिश्चित करें कि आप एक वैध JSON स्ट्रिंग लौटाते हैं। आपके AJAX सुझाव फ़ंक्शन ["Thing 1","Thing 2"]को अपनी आवश्यकताओं के अनुसार स्ट्रिंग की एक सरणी, उदाहरण के लिए , या कस्टम प्रदर्शन फ़ंक्शन, वस्तुओं की एक सरणी के साथ वापस करना चाहिए , जैसे[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]

— जोनाथन लिडबेक

मैं वापस लौटा [{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}], अब मैं आईडी और लेबल के साथ टाइपियाहेड ड्रॉपडाउन में दो कॉलम दिखाना चाहता हूं। मैं उसे कैसे कर सकता हूँ?

— विशाल

हे भगवान!!! मैं पिछले 3 दिनों से खोज रहा था, किसी ने इस बारे में उल्लेख नहीं किया। मैं अब तक सिंक फ़ंक्शन के साथ परीक्षण कर रहा था। धन्यवाद दोस्त!!

— गिल्सन PJ

धन्यवाद ! बूटस्ट्रैप 4.3, और jquery 3.4 के साथ बढ़िया काम करता है। लेकिन, जब माउस उस पर मंडराता है तो सूचीबद्ध विकल्प उजागर नहीं होते हैं। मैंने सोचा था कि यह स्वयं टाइपिया का हिस्सा होना चाहिए।

— बिनीता भारती

Answer 5

मैंने ajax क्षमताओं के साथ मूल टाइपहेड बूटस्ट्रैप प्लगइन संवर्धित किया है। उपयोग करने के लिए बहुत आसान है:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

यहाँ जीथब रेपो है: अजाक्स-टाइपहेड

Comments

मैंने गुडबर्ग के कोड को देखा है; सच कहूँ तो मुझे यह सबसे अच्छा लगा। यह थोड़ा अधिक अनुकूल है और अधिक कार्यक्षमता प्रदान करता है। अच्छा काम पॉल! केवल एक चीज जो मैं सुझाऊंगा, वह आपके README में है जो उपयोगकर्ता को याद दिलाता है कि उन्हें आपके कोड को सही ढंग से उपयोग करने में सक्षम बनाने के लिए जेएसएन-डेटा को जेएस में पार्स करने की आवश्यकता है। मुझे लगता है कि आप इसे मेरे लिए पार्स कर रहे थे ताकि मुझे थोड़ा सा लटका दिया जाए। अन्यथा, बहुत अच्छा, धन्यवाद! :)

— बैन

आपका सर्वर JSON ऑब्जेक्ट के बजाय एक स्ट्रिंग लौटाता है। jQuery के $ .ajax () का उपयोग कॉल करने के लिए किया जाता है, और यह पार्सिंग का ख्याल रखता है।

— पॉल वारेलिस

बिल्कुल सही, आपको पकड़ने के लिए धन्यवाद! :) यह प्लगइन बहुत अच्छा काम करता है।

— बने

हैलो, सर्वर साइड कैसे दिखना चाहिए JSON? मैं हो रही है Uncaught TypeError: Cannot read property 'length' of undefined । मैं json_encode($array)सही हेडर का उपयोग कर रहा हूं और भेज रहा हूं ( 'Content-Type: application/json; charset=utf-8')। jquery संस्करणjQuery v1.9.1

— Kyslik

Answer 6

मैंने jquery-ui.min.js पर कुछ संशोधन किए:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

और निम्नलिखित सीएसएस जोड़ें

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

एकदम सही काम करता है।

Comments

jquery ui min के कौन से संस्करण का उपयोग कर रहे हैं?

— पन्नाध्वज

अगर आपको jQuery 1.7.1 और jQuery UI 1.8.16 के लिए इसकी आवश्यकता है, तो मैंने उपरोक्त फिक्स के आधार पर एक GIST बनाया है जो दिखाता है कि jQuery UI फ़ाइल को कहाँ बदलना है। gist.github.com/1884819 - लाइनों के साथ टिप्पणी की जाती है // संशोधित

— रिचर्ड हॉलिस

यह एक बहुत पुराना प्रश्न / उत्तर है, लेकिन मैं केवल यह कहना चाहता हूं कि यह 3 पार्टी घटकों के कोड को बदलने के लिए हमेशा एक बुरा अभ्यास है। हर बार जब आप उन्हें अपग्रेड करते हैं तो आपको सभी परिवर्तनों को फिर से देखना होगा। इस विशेष स्थिति में, jQuery विजेट्स को विरासत में प्राप्त किया जा सकता है जो उन्हें अनुकूलित करने का एक बहुत सुरक्षित तरीका है। तो मूल रूप से, अपना खुद का विजेट बनाएं, मूल एक (इस मामले में स्वत: पूर्ण) से प्राप्त करें और अपनी कल्पना को उजागर करें! :)

— एलेक्सकोड

Answer 7

मैं इस विधि का उपयोग कर रहा हूं

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

Comments

यह अच्छा होगा यदि आप अपने उत्तर में कुछ स्पष्टीकरण जोड़ सकते हैं। उदाहरण के लिए, पहले से मौजूद उत्तरों में प्रस्तुत समाधानों की तुलना में आपके समाधान का अंतर क्या है?

— हार्न

Answer 8

एक बूटस्ट्रैप का उपयोग करके कॉल कर सकते हैं। वर्तमान संस्करण में कोई स्रोत अद्यतन समस्याएँ नहीं हैं, बूटस्ट्रैप के टाइपहेड डेटा-स्रोत को पोस्ट प्रतिक्रिया के साथ अद्यतन करने में परेशानी , यानी एक बार अद्यतन किए गए बूटस्ट्रैप के स्रोत को फिर से संशोधित किया जा सकता है।

एक उदाहरण के लिए कृपया नीचे देखें:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

Answer 9

उन लोगों के लिए जो स्वीकृत उत्तर का कॉफ़ीस्क्रिप्ट संस्करण खोज रहे हैं:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

Answer 10

मैं इस पोस्ट के माध्यम से गया था और सब कुछ सही ढंग से काम नहीं करना चाहता था और आखिरकार कुछ उत्तरों से बिट्स को एक साथ जोड़ दिया ताकि मेरे पास 100% काम करने वाला डेमो हो और इसे संदर्भ के लिए यहां पेस्ट किया जाएगा - इसे php फ़ाइल में पेस्ट करें और सुनिश्चित करें कि इसमें शामिल हैं सही जगह।

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

Answer 11

यदि आपकी सेवा सही एप्लिकेशन / json सामग्री प्रकार हेडर नहीं दे रही है, तो इसे आज़माएँ:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

Answer 12

अद्यतन: मैंने इस कांटे का उपयोग करके अपना कोड संशोधित किया है

$ .each का उपयोग करने के बजाय मैं $ .map में बदल गया जैसा कि टॉमिस्लाव मार्कोवस्की द्वारा सुझाया गया था

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

हालांकि मैं कुछ समस्याओं का सामना कर रहा हूं

अनक्रेड टाइप टाइप: अनधिकृत के 'कॉल विधि' toLowerCase नहीं कर सकता

जैसा कि आप एक नई पोस्ट पर देख सकते हैं कि मैं यहां जानने की कोशिश कर रहा हूं

आशा है कि यह अपडेट आपके लिए किसी भी मदद का है ...

Comments

ओपी से असंबंधित: मैं Array.mapइसके बजाय $.eachअपने पूरे successकॉलबैक फ़ंक्शन की सामग्री का उपयोग करूंगाvar manufacturers = results.data.manufacturers.map(function (item) { return { id: item.Manufacturer.id, manufacturer: item.Manufacturer.manufacturer } });

— टॉमिस्लाव मार्कोवस्की

शुक्रिया @TomislavMarkovski जैसा कि आप सुझाव देते हैं, मैंने अपना कोड संशोधित किया।

— mmoscosa

Answer 13

मेरे पास आपके लिए काम करने का कोई उदाहरण नहीं है और न ही मेरे पास एक बहुत ही अच्छा समाधान है, लेकिन मुझे बताएं कि मैंने क्या पाया है।

यदि आप TypeAhead के लिए जावास्क्रिप्ट कोड को देखते हैं तो यह इस तरह दिखता है:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

यह कोड स्रोत सरणी में एक तत्व से मेल करने के लिए jQuery "grep" विधि का उपयोग करता है। मुझे ऐसा कोई स्थान नहीं दिखाई दिया, जिसे आप AJAX कॉल में हुक कर सकते हैं, इसलिए इसका "क्लीन" समाधान नहीं है।

हालाँकि, कुछ हद तक हैक करने का तरीका है कि आप ऐसा कर सकते हैं जिस तरह से jQuery में grep विधि काम करती है। Grep का पहला तर्क स्रोत सरणी है और दूसरा तर्क एक फ़ंक्शन है जिसका उपयोग स्रोत सरणी से मेल खाने के लिए किया जाता है (ध्यान दें कि बूटस्ट्रैप आपको "इनिशियेटर" कहता है जब आपने इसे आरंभीकृत किया था)। आप क्या कर सकते हैं स्रोत को एक डमी एक-तत्व सरणी में सेट किया गया है और इसमें एक AJAX कॉल के साथ फ़ंक्शन के रूप में मिलान को परिभाषित किया गया है। इस तरह, यह सिर्फ एक बार AJAX कॉल चलाएगा (क्योंकि आपके स्रोत सरणी में केवल एक तत्व है)।

यह समाधान न केवल हैक करने योग्य है, बल्कि यह प्रदर्शन के मुद्दों से ग्रस्त होगा क्योंकि टाइपएडहेड कोड को प्रत्येक कुंजी प्रेस पर एक लुकअप करने के लिए डिज़ाइन किया गया है (AJAX कॉल वास्तव में केवल प्रत्येक कुछ कीस्ट्रोक्स पर या निष्क्रिय समय की एक निश्चित राशि के बाद होनी चाहिए)। मेरी सलाह है कि इसे आज़माएं, लेकिन किसी अलग ऑटोकॉम्प्लिट लाइब्रेरी से या तो चिपके रहें या किसी समस्या में भाग लेने पर नॉन-एजेएक्स स्थितियों के लिए इसका उपयोग करें।

Answer 14

अजाक्स का उपयोग करते समय, यदि आप परिणामों के सही प्रदर्शन से परेशान हैं $.getJSON(), $.get()तो इसके बजाय प्रयास करें ।

मेरे मामले में मुझे हर परिणाम का केवल पहला चरित्र मिला $.get(), जब मैंने उपयोग किया , हालांकि मैंने json_encode()सर्वर-साइड का उपयोग किया ।

Answer 15

मैं $().one() इसे हल करने के लिए उपयोग ; जब पृष्ठ लोड किया जाता है, तो मैं सर्वर को अजाक्स भेजता हूं और काम करने की प्रतीक्षा करता हूं। फिर परिणाम के लिए कार्य करें। $().one()महत्वपूर्ण है । इनपुट से एक बार अटैच करने के लिए। बल को टाइप करें। खराब लेखन के लिए खेद है।

(($) => {
    
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;
          // an array that will be populated with substring matches
          matches = [];
      
          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');
      
          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              matches.push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

Answer 16

 $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

?>