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

View: 482    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Codeigniter   Fields: Other

9 point/4 review File has been tested

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.

Introduction

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

use bootstrap typeahead with an ajax function to return name and id Posted on 15-02-2016  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. 2.25/10 482

Comment:

To comment you must be logged in members.

Files with category

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd