具有相同类的文本框组的Javascript

我有一组文本框，类为“track”。所有文本框都在单独的td中。对于绑定在同一td中的每个文本框，我都有特定的div。我正在尝试为每个文本框编写一个JavaScript函数（自动完成函数），以便在特定的div中提供建议

我的结构是

<tr>
    <td><input name="track[]" type="text" class="track" maxlength="150" onkeyup="lookup(this.value);" onblur="fill();"/>
      <div class="suggestionsBox" id="suggestions" style="display: none;"><img src="images/upArrow.png" style="position: relative; top: -12px; left: 50px;" alt="upArrow" />
        <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div>
      </div></td>
</tr>

---

注意如何为每个文本框转换它。它为特定的文本框提供建议，并只填充特定的文本框。

我认为以下内容将满足您的要求。我对

lookup（）。这使它能够对正确的建议元素进行必要的更改

function lookup(poetname, inputElement) {
    var suggestions = inputElement.next();
    if(poetname.length == 0) {
        // Hide the suggestion box.
        suggestions.hide();
    } else {
        //alert("Hiiii");
        $.post("rpc.php", {queryString: ""+poetname+""}, function(data){
            if(data.length >0) {
                suggestions.show();
                suggestions.children('div').html(data);
            }
        });
    }
}

$('input.track').keyup(function(){
    lookup($(this).val(), $(this));
});

在TD内的输入上放置一个ID，并将其传递给lookup函数。然后，您可以使用jquery显示和隐藏与特定类最近的div，正如您希望的那样使用该ID。
拥有多个具有相同ID的元素是非常糟糕的。我已经从代码中删除了所有ID属性

看看这把小提琴：

为每个文本框附加keyup，并在属于同一父td的子级的div上使用AJAX调用的返回，如下所示：

$('input.track').keyup(function() {
    var poetname = $(this).val();
    if(poetname.length == 0) {
        // Hide the suggestion box.
        $(this).parent().find('#suggestions').hide();
    } 
    else {
        $.ajax({
            url: "rpc.php",
            type: "post",
            data: {queryString: poetname},
            context: this, // i.e. the text box
            success: function(data) {
                if(data.length >0) {
                    $(this).parent().find('#suggestions').show();
                    $(this).parent().find('#autoSuggestionsList').html(data);
                }
            }
        });
    }
});

您还需要在模糊上执行此操作：

$('input.track').blur(function() {
    $(this).val('');
    $(this).parent().find('#suggestions').hide();
});

现在用于在单击建议时填充文本框。这取决于每个建议在autoSuggestions div中的列出方式。假设建议来自rpc.php，格式为：

<div class="suggestion_item">suggestion text here</div>
<div class="suggestion_item">suggestion text here</div>
...

我是否也需要更改为HTML？我的意思是说我跳过了HTML输入框中的
onblur
事件。我是否需要更改
onkeyup
事件，或者需要在
lookup
函数中作为第二个参数传递什么参数。因为inputElement尚未定义，所以我仍然收到错误。
next（）.next（）
不是任何元素它是
null
该
.suggestionList
是
.suggestionBox
@AndreasAL的子元素-谢谢，我已经修复了它。OP——将来请更清楚地格式化html。关于你的问题，通常内联JS被认为是不好的做法。如果要在模糊事件上运行
lookup（）
，只需在我的代码中将
keyup
更改为
blur
。至于需要传递给
lookup（）
的第二个参数，请查看我的代码。第一个参数是输入值，第二个参数是输入元素本身。@maxedison:我仍然不清楚你的答案。意味着我应该从html中删除on blur或onkeyup事件。因为如果我在HTML代码中使用它，它会给我错误inputelement未定义。是的，从HTML中删除内联JS。并确保将
$（'input.track'）.keyup…
代码包装在
$（document.ready（function（）{…}）中
jquery命名约定是否允许我们采用以
$
开头的变量名，就像我们采用
$list
一样？不用担心，jquery只保留变量$abc而不是$abc。它与：
var a=“something”相同；var ab=“其他东西”
。设置
ab
变量是否非法。。如果要向jQuery命名空间添加函数或变量，请执行以下操作：
$.abc
，这是另外一个操作。请参阅
简短说明：
$
只是一个普通字符，类似于
a、b、c
。但它单独代表jQuery。其他框架也像原型一样使用短的
$
@vijaykrishnan K：很好，vijay，我喜欢你的答案，但你没有提到如果我点击任何建议，它将如何填充我的文本框。这取决于每个建议如何在autoSuggestions分区中列出。假设每个建议都存储为
建议文本此处
，你可以执行以下操作：
$（'.suggestion\u item'））.click（function（）{$（this.parents（'td'）.find（'.track'）.val（$（this.text（））；}）
$('input.track').keyup(function() {
    var poetname = $(this).val();
    if(poetname.length == 0) {
        // Hide the suggestion box.
        $(this).parent().find('#suggestions').hide();
    } 
    else {
        $.ajax({
            url: "rpc.php",
            type: "post",
            data: {queryString: poetname},
            context: this, // i.e. the text box
            success: function(data) {
                if(data.length >0) {
                    $(this).parent().find('#suggestions').show();
                    $(this).parent().find('#autoSuggestionsList').html(data);
                }
            }
        });
    }
});

$('input.track').blur(function() {
    $(this).val('');
    $(this).parent().find('#suggestions').hide();
});

<div class="suggestion_item">suggestion text here</div>
<div class="suggestion_item">suggestion text here</div>
...

$('.suggestion_item').click(function() {
    $(this).parents('td').find('.track').val($(this).text());
});