爲新添加的元素添加自動完成

Question

我已完成使用JQuery自動完成的自動完成功能。我的要求如下：

新增自動完成自動爲新添加的元素，這些元素都有一個共同的類：speClass

1.I想讀取輸入框的值，我不知道怎麼讀？

2.如何爲新添加的元素添加自動完成功能。它僅適用於第一個輸入（默認顯示）

標題：

<script type="text/javascript" src="js/jquery-ui.js"></script> 
<script type="text/javascript" src="js/jquery-1.9.1.js"></script> 

HTML：

<tbody id="items"> 
    <tr> 
    <td><input type="text" class="speClass" name="specifications"/></td> 
    </tr> 
</tbody> 

JS

function addItem() { 
    var item = "<tr><td><input type='text' class='speClass' name='specifications' /> </tr>" ; 
    $("#items").append(item); 
} 

$(document).ready(function(){ 
    var cache_com = {}; 
    $(".specClass").autocomplete({ 
    source: function(request, response) { 
     var term = $(".speClass").val(); 
     if(term in cache_com) { 
      alert(term); 
      response($.map(cache_com[term], function(item) { 
       return { 
        label: item, 
        value: item 
       } 

      })); 
      return ; 
     } 

     $.ajax({ 
      type:"POST", 
      url: "loadSpecList.action", 
      data:{ 
       specQuery: term 
      }, 
      success: function(data) { 
       alert(term); 
       cache_com[term] = data; 
       response($.map(data, function(item) { 
        return { 
         label: item, 
         value: item 
        } 
       })); 
      }, 
      dataType: "json" 
     }); 
    }, 
    minLength: 1, 
    select: function(event, ui) { 

    } 
    }); 
}); 

PS：我在代碼中修正變量錯誤

Answer 1

更換

$(".specifications").autocomplete({

通過

$(".specClass").autocomplete({ 

Answer 2

因爲它是一個小部件，您東東調用控件初始化爲每個新的元件

function addItem() { 
    var item = "<tr><td><input type='text' class='speClass' name='specifications' /> </tr>" ; 
    var speClass = $(item).appendTo($("#items")).find('.speClass'); 
    createAutocomplete(speClass) 
} 

var cache_com = {}; 
function createAutocomplete(els){ 
    els.autocomplete({ 
     source: function(request, response) { 
      var term = request.term; 
      if(term in cache_com) { 
       alert(term); 
       response($.map(cache_com[term], function(item) { 
        return { 
         label: item, 
         value: item 
        } 

       })); 
       return ; 
      } 

      $.ajax({ 
       type:"POST", 
       url: "loadSpecList.action", 
       data:{ 
        specQuery: term 
       }, 
       success: function(data) { 
        alert(term); 
        cache_com[term] = data; 
        response($.map(data, function(item) { 
         return { 
          label: item, 
          value: item 
         } 
        })); 
       }, 
       dataType: "json" 
      }); 
     }, 
     minLength: 1, 
     select: function(event, ui) { 

     } 
    }); 
} 

$(document).ready(function(){ 
    createAutocomplete($(".specifications")) 
}); 

您可以閱讀t他在源文件中使用request.term輸入文本