使用类选择器进行自动完成,需要获取关联的元素id

时间:2010-11-05 20:12:45

标签: jquery jquery-plugins autocomplete

我在网页上实现了Dylan Verheul的Autocomplete 1.6 JQuery插件。我在页面上的20多个不同的输入框上使用自动完成功能。类名被用作选择器。自动完成功能在每个不同的输入元素上都能正常工作,但我无法获取当前输入元素的ID。

基本上HTML就是这样:

<form name="myform" action="blah.asp" method="post">
  <input class="ItemMatchText" type="text" id="selectQuestion_104657" name="selectQuestion_104657" value="">
  <input class="ItemMatchText" type="text" id="selectQuestion_104664" name="selectQuestion_104664" value="">
  <input class="ItemMatchText" type="text" id="selectQuestion_104710" name="selectQuestion_104710" value="">
</form>

JavaScript基本上是这样的:

$(function() { 
  var selectedId = "";
  $('.ItemMatchText').autocompleteArray(ItemArray, {
    autoFill:true,
    matchContains:true,
    onItemSelect: function(data1) {
      selectedId = data1.extra[0];
      }
  });

//...
});

行:selectedId = data1.extra [0];获取所选行的数组中的下一列。在同一事件或任何其他事件中,我想获取当前正在键入的元素Id以唤起此自动选择。

我尝试的所有内容都返回LI元素或页面上第一个带有ItemMatchText类的INPUT元素。

如何获取输入的ID?

3 个答案:

答案 0 :(得分:0)

onItemSelect: function (data1) {
    selectedId = $(data1).attr('id');
}

尝试一下(我对这个插件并不十分熟悉,但在查看了源代码之后应该是这样)。

答案 1 :(得分:0)

我担心这没有实施。

您可以尝试为每个输入创建单独的自动复位器:

$(function() {  

$('.ItemMatchText')
.each(
        function()
        {
          $(this).autocompleteArray(ItemArray, 
            {
              autoFill:true,
              inputObj:this,
              matchContains:true,
              onItemSelect: function() 
                            {
                              alert(this.inputObj.id);
                            }
            });
        }
      );
});

答案 2 :(得分:0)

在阅读完自动完成脚本后,我决定首先必须能够返回给予该函数的输入值。

这是函数的开头:

jQuery.autocomplete = function(input, options) {
    // Create a link to self
    var     me = this;

    // Version
    var     version = 1.6;

    // Create jQuery object for input element
    var     $input = $(input).attr('autocomplete', 'off');

根据其用法,我假设输入是输入:选中的文本框元素。我搜索了onItemSelect的代码并找到了:

if (options.onItemSelect) {
    setTimeout(function() {
        options.onItemSelect(li)
        }, 1);
}

要使用LI元素公开输入变量,我只需添加它:

if (options.onItemSelect) {
    setTimeout(function() {
        options.onItemSelect(li, input)
        }, 1);
}

然后我可以简单地抓住onItemSelect事件的输入元素。

$(function() { 
  var selectedId = "";
  var inputId = "";
  $('.ItemMatchText').autocompleteArray(ItemArray, {
    autoFill:true,
    matchContains:true,
    onItemSelect: function(data1, inputElm) {
      selectedId = data1.extra[0];  // Get the next column of in data row
      inputElm = inId.id;           // Get the input's Id!
      }
  });

//...
});

这可能不是解决这个问题的最好方法,但它适用于这种情况。当然我需要重新缩小文件。