8

嗨！我正在使用 twitter bootstraps typeahead：

我正在调用一个使用 json_encode 返回响应的页面，该页面返回一个名称和一个 ID，

我希望预先输入的列表会显示名称列表，并且当我选择其中一个名称以将 id 值写入隐藏字段时。

调用工作正常，编写字段应该很容易。我不知道该怎么做是如何将名称与 id 分开。

现在，当我搜索某些内容时，在建议列表中我可以看到返回结果如下：

名称1：id1 名称2：id2

我只想看到名字，但也想携带 id 的值。

我怎样才能做到这一点？

 $(function(){
    $("#typeahead_<? print $key; ?>").typeahead(
        {
        source: function(query, process)
                    {
                    $.ajax({
                        url:    '/getAjaxProducts',
                        type:   'POST',
                        data:   'query=' + query,
                        dataType: 'JSON',
                        async: true,
                        success: function(data)
                                {
                                process(data);
                                }
                            });                 
                    }
        });
});
4

6 回答 6

21

包含名称/ID 对的典型 JSON 文档将如下所示：

[
  {
    "id": 1
    "name": "firstName"
  },
  {
    "id": 2
    "name": "secondName"
  }
]

这里的策略是构建一个对象字面量，在解析结果时将名称映射到 ID，同时仅使用名称来填充预输入：

var productNames = new Array();
var productIds = new Object();
$.getJSON( '/getAjaxProducts', null,
        function ( jsonData )
        {
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.name );
                productIds[product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
        } );

一旦用户从预输入中选择了一个项目，您可以使用以下命令引用所选项目：

$( '#product' ).val()

您可以通过以下方式获取与所选项目关联的 ID：

productIds[$( '#product' ).val()]

从您的问题来看，您的 JSON 文档的结构可能会有所不同，因此您将酌情更改解析，但适用相同的一般策略。

于 2013-01-04T22:51:13.077 回答
11

很抱歉“复活”这篇文章，但我要疯了！

如果你们中的一些人在使用这些示例代码时遇到问题（它们都不起作用，都返回“未定义”而不是显示名称

只需添加

displayKey: 'name',

用您的远程源返回的标签变量名称替换当然“名称”

（很难在上面找到最新的样本，在网上找到的大多数样本都是针对先前版本的 typeahead 并且与新版本不兼容...）

于 2014-06-16T11:01:15.723 回答
8 
......updater: function (item) {
        var item = JSON.parse(item);
        console.log(item.name); 
        $('#VehicleAssignedTechId').val(item.id);       
        return item.name;
    }

在 typeahead 调用的更新程序上，您可以输入上述代码，该代码允许您在文本框中添加选择的值，或者您必须将其值放在其他隐藏字段中。

完整的ajax调用如下：

$('#VehicleAssignedTechName').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); 
        $('#VehicleAssignedTechId').val(item.id);       
        return item.name;
    }
});
于 2013-02-26T06:04:16.527 回答
1

我的解决方案是：

var productNames = new Array();
var productIds = new Object();
$.getJSON( '/getAjaxProducts', null,
        function ( jsonData )
        {
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.id + product.name );
                productIds[product.id + product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
        } );

在我的例子中，product.id 是一个代码，因此在 typeahead 控件中显示它很有用。这样我就避免了重名风险。

于 2017-02-23T09:13:47.140 回答
0

当我尝试处理用户名和 id 时，我遇到了同样的问题。我有一个棘手的修复，但后来我用正确的解决方案修复了它。

看看这个，

$('#search').typeahead({
 source: function(query, process) {
 var $url = "/controller/function/list_users/?q="+query;
 var $datas = new Array;
 $datas = [""];
 $.ajax({
 url: $url,
 dataType: "json",
 type: "GET",
 success: function(data) {
 $.map(data, function(data){
 var group;
 group = {
 id: data.id,
 name: data.user_name,
 toString: function () {
 return JSON.stringify(this);
 //return this.variable;
 },
 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.name) != 'undefined') {
 value += ' <span class="pull-right muted">';
 //value += this.name;
 value += '</span>';
 }
 return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1em;">' + value + '</div>', arguments);
 }
 };
 $datas.push(group);
 });
process($datas);
 }
 });
 },
 property: 'user_name',
 items: 10,
 minLength: 2,
 updater: function (item) {
 var item = JSON.parse(item);
 $('#hiddenId').val(item.id);
 $('#username').val(item.name);
//you can perform your actions here
//example</p>
//location = '/controller/function/'+item.id+'/edit';
 //document.redirect = location;
}
});

也看看这个链接。

http://vaisakhvm.wordpress.com/2013/07/31/twitter-bootstrap-typeahead-process-multiple-values/

于 2013-07-31T06:02:21.763 回答
0

我注意到在使用此代码时，如果匹配包含字母“st”，则预输入建议会在预输入建议中包含样式标记。

例如，建议的匹配将显示

style="padding: 10px; font-size: 1.5em;">标准

代替

标准

我将替换功能更改为：

replace: function (string) {
  return String.prototype.replace.apply(this.name, arguments);
}

显然你失去了额外的格式，但它不会在“st”匹配上中断（我假设它也会在“di”或 div 标签的其他子字符串上中断。

于 2013-05-16T17:35:21.880 回答