英文:
Jquery - how to refer to the root element of the function?
问题
这里我正在将jQuery的自动完成功能应用于我的页面上所有具有main-item类的文本框。
问题出在这一行：var search = ($this).val().toLowerCase();。我试图获取文本框的文本，但在这里$this只是指代了从ajax调用返回的数据。我该如何从调用此函数的$(".main-item")元素中获取文本？
$(function () {
$(".main-item").autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://api.test.com",
type: "GET",
dataType: "xml",
success: function (data) {
var matches = [];
// 在这里获取文本框的文本
var search = $(this).val().toLowerCase();
$(data).find("string").each(function () {
var item = $(this).text();
if (item.toLowerCase().indexOf(search) > -1) {
matches.push(item);
}
});
response(matches);
},
error: function (req, err) {
console.log(req)
}
});
},
minLength: 2,
select: function( event, ui ) {
$(".main-item").val(ui.item.value);
$("span.input-group-btn > input").click();
}
});
});
英文:
Here I'm applying jquery's autocomplete function to all the textboxes on my page with the main-item class.
The problem is on the line var search = ($this).val().toLowerCase(); I'm trying to get the text of the textbox, but here $this just refers to the data returned from the ajax call. How can I get the text from $( ".main-item" ) element that invoked this function instead?
$(function () {
$( ".main-item" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://api.test.com",
type: "GET",
dataType: "xml",
success: function (data) {
var matches = [];
var search = ($this).val().toLowerCase();
$(data).find("string").each(function () {
var item = $(this).text();
if (item.toLowerCase().indexOf(search) > -1) {
matches.push(item);
}
});
response(matches);
},
error: function (req, err) {
console.log(req)
}
});
},
minLength: 2,
select: function( event, ui ) {
$(".main-item").val(ui.item.value);
$("span.input-group-btn > input").click();
}
});
});
答案1
得分: 1
你应该使用jQuery::each()逐个处理每个文本框，并将文本框保存到变量以供以后使用。
请不要使用var，而是使用现代的const/let代替。
$(function () {
$(".main-item").each(function(_, textbox){
const $textbox = $(textbox);
$textbox.autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://api.test.com",
type: "GET",
dataType: "xml",
success: function (data) {
const matches = [];
const search = $textbox.val().toLowerCase();
$(data).find("string").each(function () {
const item = $(this).text();
if (item.toLowerCase().indexOf(search) > -1) {
matches.push(item);
}
});
response(matches);
},
error: function (req, err) {
console.log(req)
}
});
},
minLength: 2,
select: function( event, ui ) {
$textbox.val(ui.item.value);
// 这里可能有一个bug
$("span.input-group-btn > input").click();
}
});
});
});
英文:
You should handle each textbox individually with jQuery::each() and save a texbox to a variable for later use.
And please for god's sake don't use var, use modern const/let instead...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function () {
$( ".main-item" ).each(function(_, textbox){
const $textbox = $(textbox);
$texbox.autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://api.test.com",
type: "GET",
dataType: "xml",
success: function (data) {
var matches = [];
var search = $textbox.val().toLowerCase();
$(data).find("string").each(function () {
var item = $(this).text();
if (item.toLowerCase().indexOf(search) > -1) {
matches.push(item);
}
});
response(matches);
},
error: function (req, err) {
console.log(req)
}
});
},
minLength: 2,
select: function( event, ui ) {
$textbox.val(ui.item.value);
// you have a bug here maybe
$("span.input-group-btn > input").click();
}
});
});
});
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论