bootstrap-typeahead.js v2.3.2来自建议选项选择选项并在新选项卡中打开

时间:2014-12-26 11:27:31

标签: twitter-bootstrap typeahead.js

在建议选项中,用户将选择右键单击选项并在新选项卡中打开。

这样用户就可以在新标签页中打开多个链接。

这是我的来源

  [
     {"field_name":"abc ","field_value":"10162"},
     {"field_name":"xyz ","field_value":"10135"},
     {"field_name":"pqr ","field_value":"10121"},
     {"field_name":"test","field_value":"10100"}
    ]

HTML

  <input type="text" name="company" id="company" data-provide="typeahead" class="x-large form-control typeahead" autocomplete="off" data-hidden="#companyID" data-url="http://example.com/ajax/getCompany">

脚本

$(document).ready(function() {
        var Mapped = {};
        $(".typeahead").typeahead({

            source : function(query, process) {

                return $.getJSON(
                        this.$element.attr('data-url'),
                        {query: query},
                function(result) {
                    var Labels = [];

                    $.each(result, function(i, item) {
                        Mapped[item.field_name] = item.field_value
                        Labels.push(item.field_name)
                    });

                    return process(Labels);

                });

            },
            items     : 10,
            minLength : 2,
            matcher   : function(item) {
                //console.log(item);
                return item;
            },
            updater   : function(item) {
                //For the Label selected ( item ) get the value mapped from the mapping array and set it to hidden element
                //$('hiddenelment').val(countryMapped[item]);
                var hidden_id = this.$element.attr('data-hidden');
                $(hidden_id).val(Mapped[item]);

                return item;
            }
        });

});

1 个答案:

答案 0 :(得分:0)

这是解决方案, 在下面的代码中添加了typeahead.js的渲染函数并添加了链接find(&#34; Link here&#34;)

      $(".typeahead").data("typeahead").render = function (items) {

            var that = this

            items = $(items).map(function (i, item) {
               i   = $(that.options.item).attr('data-value', item)
               i.find('a').html(that.highlighter(item))

                //console.log("Link : "+Mapped[item]);
                // Link here (my answer)
               i.find('a').attr("href","<?php echo base_url();?>/index/"+Mapped[item]);

               return i[0]
            })

            items.first().addClass('active')
            this.$menu.html(items)
            return this

       };