如何使用隐藏字段使用带有 ID/值对的 jquery 自动完成功能答案

【问题标题】：How to employ jquery autocomplete with ID/value pairs using a hidden field如何使用隐藏字段使用带有 ID/值对的 jquery 自动完成功能
【发布时间】：2011-07-05 10:40:59
【问题描述】：

关于我的问题有几个问题，但不知何故，没有一个可以真正帮助我解决它。我对javascript不太熟悉，更不用说jquery了，所以请多多包涵。

如上所述，我有一个带有 jquery 自动完成功能的文本字段，效果很好。但是我需要一个隐藏字段，其中填充了与所选值对应的 ID。表格如下：

<input name="clubname" id="clubname" type="text" />
<input name="clubid" id="clubid" type="hidden" value="" />

对于自动完成，我使用这样的数组：{id: 1, value: 'something' }。整个页面在 php 中从数据库中获取数据并写入数组。在自动完成中，我添加了重音文本功能。代码如下：

var accentMap = {
    'á': 'a',
    'ä': 'a',
    'à': 'a',
    'â': 'a',
    'ö': 'o',
    'ô': 'o',
    'ó': 'o',
    'ò': 'o',
    'ü': 'u'
};

var normalize = function (term) {
    var ret = '';
    for (var i = 0; i < term.length; i++) {
        ret += accentMap[term.charAt(i)] || term.charAt(i);
    }
    return ret;
};

$().ready(function () {
    $('#clubname').autocomplete({
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
            response($.grep(clubs, function (value) {
                value = value.label || value.value || value;
                return matcher.test(value) || matcher.test(normalize(value));
            }));
        }
    });
});
});

看来我必须使用结果处理程序将 ID 放入隐藏字段。但是如何准确访问所选值的 ID 让我无法理解。

任何帮助将不胜感激！

【问题讨论】：

thepitchmark.com/test.php

标签： jquery autocomplete hidden-field

【解决方案1】：

希望此解决方案对您有所帮助

$JsonArray =array();
foreach($EmployeeDetailList as $value){
    $Array[label]=$value['user_name'];
    $Array[value]=$value['user_name'];
    $Array[eid]=$value['id']; //Here goes the ID of the employee
    array_push($JsonArray,$Array);
}
$JsonSerialize=json_encode($JsonArray);

这是用于填充 Json 编码数组的服务器端编码

现在下一部分实现 JQuery 部分

$(function() {
var availableTags = <?php echo $JsonSerialize;?>;
$( "#imas" ).autocomplete({
source: availableTags,
select: function(event,ui){
    var userid = ui.item.eid;
    alert(userid); //This will alert the Employee ID . You can use it any where you want 
},
});
});

【讨论】：