链接：http://jsfiddle.net/na1zLkz3/4/
Reources:lodash.js ,select2.full.js,juery,select2.css
测试了发现，必须用上面链接里的select2，jquery的js,css才行，
数据格式必须是[{'id':id,'text':text},{'id':id,'text':text},{'id':id,'text':text}...]
html:

<input type="text" id="ddlCar" style="width:300px"/>

js：

// Function to shuffle the demo data
    var shuffle = function (str) {
        return str.split("").sort(function () {
            return 0.5 - Math.random();
        }).join("");
    };

    // For demonstration purposes we first make
    // a huge array of demo data (20 000 items)
    // HEADS UP; for the _.map function i use underscore (actually lo-dash) here
    var mockData = function () {
        var array = _.map(_.range(1, 10), function (i) {
            return {
                id: i,
                text: shuffle("te ststr ing to shuffle") + " " + i
            };
        });
        return array;
    };
var dummyData = mockData();
 // init select 2
    $("#ddlCar").select2({
        data: dummyData,
        // init selected from elements value
        initSelection: function (element, callback) {
            var initialData = [];
            $(element.val().split(",")).each(function () {
                initialData.push({
                    id: this,
                    text: this
                });
            });
            callback(initialData);
        },

        // NOT NEEDED: These are just css for the demo data
        dropdownCssClass: "capitalize",
        containerCssClass: "capitalize",

        // NOT NEEDED: text for loading more results
        formatLoadMore: function () {
            return "Loading more...";
        },

        // query with pagination
        query: function (q) {
            var pageSize,
                results;
            pageSize = 20; // or whatever pagesize
            var results = [];
            if (q.term && q.term !== "") {
                // HEADS UP; for the _.filter function i use underscore (actually lo-dash) here
                var results = this.data;
                var results = _.filter(results, function (e) {
                    if (typeof e.children != "undefined") {
                        subresults = _.filter(e.children, function (f) {
                            return (f.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
                        });
                        if (subresults.length > 0)
                            return true;
                        return false;
                    }
                    return (e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
                });
                newresults = [];
                for (var i = 0, len = results.length; i < len; i++) {
                    newresults[i] = {};
                    if (typeof results[i].text != "undefined")
                        newresults[i].text = results[i].text;
                    if (typeof results[i].id != "undefined")
                        newresults[i].id = results[i].id;
                    if (typeof results[i].children != "undefined") {
                        newresults[i].children = results[i].children;
                        newresults[i].children = _.filter(newresults[i].children, function (f) {
                            return (f.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
                        });
                    }
                }
                results = newresults;
            } else if (q.term === "") {
                results = this.data;

            }

            q.callback({
                results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
                more: results.length >= q.page * pageSize
            });
        }
    });