如何使用隐藏字段通过 ID/值对使用 jquery 自动完成

发布于 2024-11-18 18:28:26 字数 1290 浏览 3 评论 0原文

关于我的问题有几个问题,但不知怎的,没有一个能真正帮助我解决它。 我对 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。

任何帮助将不胜感激!

There are several questions regarding my problem, but somehow none could actually help me solve it.
I'm not that familiar with javascript let alone jquery so please bear with me.

As stated I have a text field with jquery autocomplete in place, which works just great.
But I need to have a hidden field populated with the corresponding ID to the selected value.
Here's the form:

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

For the autocomplete I use an array like this: {id: 1, value: 'something' }.
The whole page is in php getting the data from the DB and writing the array.
Into the autocomplete I added the accented text feature.
Here's the code:

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));
            }));
        }
    });
});
});

It seems I have to use the result handler to get the ID into the hidden field. But how to exactly access the ID of the selected value escapes me.

Any help would be greatly appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

别在捏我脸啦 2024-11-25 18:28:27

希望这个解决方案对您有帮助

$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 
},
});
});

Hope this solution helps you

$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);

This was the server side coding to populate the Json encoded array

Now the next portion implements the JQuery Part

$(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 
},
});
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文