Question

我有自动完成列表的特定功能。虽然它的工作很好，页面有单个文本框。我想在有多个文本框的页面上实现它。假设我有10个文本框，我想将它实现给所有人。我对选择器和所有人有点困惑。

<input name="track[]" type="text" class="track" maxlength="150" onkeyup="lookup(this.value);" onblur="fill();" id="track_1"/>
      <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>


<input name="track[]" type="text" class="track" maxlength="150" onkeyup="lookup(this.value);" onblur="fill();" id="track_2"/>
      <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>

我的文本框中有不同id的流程...... 我的jquery函数是......

function lookup(poetname) { 
    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();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $('#poetname').val(thisValue);
    setTimeout("$('#suggestions').hide();", 500);
}

Answer 1

注意：您不应该为多个元素使用ID，而是使用类。 ID应该是唯一的。

您可以将函数绑定到每个输入

$(function(){
  $("input.track").keyup(function(e){
    var poetname = $(this).val()
    if(poetname.length == 0){
      // Hide the suggestion box
      $(this).find('div.suggestionsBox').hide()
    }
    //...rest of code...//

  })
})

与jquery选择器的混淆实现了多个元素

1 个答案: