英文:
jQuery selector for setting a value of an input based on the current context
问题
我有多个输入框，我想在它们上面应用相同的jQuery自动完成功能。
当用户选择一个选项时，我想将相应文本框的值设置为所选项的id。
<script>
$(function () {
$(".batter").autocomplete({
source: function (request, response) {
$.ajax({
url: "getplayersAjax.aspx",
dataType: "jsonp",
data: {
term: request.term,
league: 11
},
delay: 400,
success: function (data) {
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
$("#birds1id").val(ui.item.id);
}
});
});
</script>
<div class="ui-widget">
<input id="birds1" class="batter"><input type="text" id="birds1id" />
</div>
<div class="ui-widget">
<input id="birds2" class="batter"><input type="text" id="birds2id" />
</div>
<div class="ui-widget">
<input id="birds3" class="batter"><input type="text" id="birds3id" />
</div>
对于birds1/birds1id这对，代码正常工作。
然而，我正在努力弄清楚如何使该功能适用于第二个birds2/birds2id这对（以及稍后我将添加的其他对），而不必复制自动完成函数。
我假设#birds1id选择器需要替换为更通用的内容，但我不知道如何做。[这里是jQuery初学者] 我尝试使用'this'，但似乎无法使其工作。
英文:
I have several inputs that I would like to offer the same jQuery Autocomplete function on.
When the user selects an option, I would like to set the value of the corresponding text box to the id of the selection.
<script>
$(function () {
$(".batter").autocomplete({
source: function (request, response) {
$.ajax({
url: "getplayersAjax.aspx",
dataType: "jsonp",
data: {
term: request.term,
league: 11
},
delay: 400,
success: function (data) {
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
$("#birds1id").val(ui.item.id);
}
});
});
</script>
<div class="ui-widget">
<input id="birds1" class="batter"><input type="text" id="birds1id" />
</div>
<div class="ui-widget">
<input id="birds2" class="batter"><input type="text" id="birds2id" />
</div>
<div class="ui-widget">
<input id="birds3" class="batter"><input type="text" id="birds3id" />
</div>
The code works fine for the birds1/birds1id pair.
However, I am struggling to work out how to get the function to work for the second birds2/birds2id pair (and other pairs that I will add later) without having to replicate the autocomplete function.
I assume the #birds1id selector needs to be replaced with something more generic but I am at a loss as to how to do it. [jQuery beginner here] I tried using 'this' but couldn't seem to get it work.
答案1
得分: 0
你说得对，你需要替换硬编码的 #birds1id 选择器。你可以从作为你的 select 处理程序的第一个参数的 event 对象中获取对已更改的输入的引用：event.target。一旦你有了这个元素，你可以查询其兄弟元素并设置其值。注意：我认为你需要使用 ui.item.value 来获取值，而不是你在代码中使用的 ui.item.id，但也许我错了。success 处理程序变成了：
function(event, ui) {
const $target = $(event.target);
const $sibling = $target.next();
$sibling.val(ui.item.value);
}
这里 有一个用于参考的示例。
英文:
You are correct that you need to replace the hard-coded #birds1id selector. You can obtain a reference to the changed input from the event object that is the the first argument to your select handler: event.target. Once you have the element, you can query for its sibling and set the value. Note: I would think you need to use ui.item.value to get the value, rather than the ui.item.id you have in your code, but maybe I am wrong. The success handler becomes:
function(event, ui) {
const $target = $(event.target);
const $sibling = $target.next();
$sibling.val(ui.item.value);
}
Here is a fiddle for reference.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论