use bootstrap typeahead with an ajax function to return name and id

View: 675    Dowload: 0   Comment: 0   Post by: hanhga   Category: Codeigniter   Fields: Other

I want that the typeahead list will show a list of names, and when I select one of the name to write the id value to a hidden field.
Bootstrap Typeahead doesn't support an array of objects as a result by default, only an array of string. Because "matcher", "sorter", "updater" and "highlighter" functions expect strings as parameter.

Instead, "Bootstrap" supports customizable "matcher", "sorter", "updater" and "highlighter" functions. So we can rewrite those functions in Typeahead options.
I used Json format, and bound the Id to a hidden html input.

A typical JSON document that contains name/ID pairs is going to look like this:

[
  {
    "id": 1
    "name": "firstName"
  },
  {
    "id": 2
    "name": "secondName"
  }
]
The strategy here is to build an object literal that maps names to IDs as you parse the result, while only using the name to populate the typeahead.
HTML 
<input type="text" name="search" id="search" data-provide="typeahead" class="x-large" autocomplete="off" />
<input type="hidden" name="hiddenID" id="hiddenID"/>
Full ajax call is as below:
$('#search').typeahead({
    source: function(query, process) {
        var $url =SITE_URL+ 'api/vehicle_techfield_typeahead/' + query + '.json';
        var $items = new Array;
        $items = [""];
        $.ajax({
            url: $url,
            dataType: "json",
            type: "POST",
            success: function(data) {
                console.log(data);
                $.map(data, function(data){
                    var group;
                    group = {
                        id: data.id,
                        name: data.name,                            
                        toString: function () {
                            return JSON.stringify(this);
                            //return this.app;
                        },
                        toLowerCase: function () {
                            return this.name.toLowerCase();
                        },
                        indexOf: function (string) {
                            return String.prototype.indexOf.apply(this.name, arguments);
                        },
                        replace: function (string) {
                            var value = '';
                            value +=  this.name;
                            if(typeof(this.level) != 'undefined') {
                                value += ' <span class="pull-right muted">';
                                value += this.level;
                                value += '</span>';
                            }
                            return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1.5em;">' + value + '</div>', arguments);
                        }
                    };
                    $items.push(group);
                });

                process($items);
            }
        });
    },
    property: 'name',
    items: 10,
    minLength: 2,
    updater: function (item) {
        var item = JSON.parse(item);
        console.log(item.name); 
        $('#hiddenID').val(item.id);       
        return item.name;
    }
});

use bootstrap typeahead with an ajax function to return name and id

I want that the typeahead list will show a list of names, and when I select one of the name to write the id value to a hidden field.

Posted on 15-02-2016 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd