如何將相同的自動完成動作應用於多個表單域

Question

我想添加多個產品。對於每個產品的名稱，我想給用戶自動建議，但我能夠給予自動建議只有第一個產品。任何一個告訴我我做錯了什麼。

我的HTML代碼

<label>Product Name 1.</label> 
<input style="border:2px solid #7f9db9" name="product1" id="in_pc_item_moq_unit_type" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text"> 

<label>Product Name 2.</label> 

<input style="border:2px solid #7f9db9" name="product2" id="in_pc_item_moq_unit_type" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text"> 

<label>Product Name 3.</label> 
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input"id="in_pc_item_moq_unit_type" maxlength="100" name="product3" placeholder="Enter your product name" type="text"> 

<label>Product Name 4.</label> 

    <input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type" maxlength="100" name="product4" placeholder="Enter your product name" type="text"> 

<label>Product Name 5.</label> 

    <input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type" maxlength="100" name="product5" placeholder="Enter your product name" type="text"> 

我的Java腳本代碼

< script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="http://utils.imimg.com/suggest/js/jq-ac-ui.js"></script> 
    <script type="text/javascript"> 
    function auto_suggest() 
    { 
     if(typeof(Suggester)!="undefined") 
     { 
      sugg=new Suggester({"element":"in_pc_item_moq_unit_type","onSelect":selecttext,"type":"mcat","placeholder":"Enter your product name","classPlaceholder":"ui-placeholder-input",minStringLengthToFetchSuggestion:1}); 
     }else 
     { 
      setTimeout(function(){ 
      auto_suggest()},50); 
     } 
    } 
    auto_suggest(); 

    function selecttext(event, ui) 
    { 
     this.value = ui.item.value; 

    } 

    </script> 

Answer 1

您使用常見的函數下面這段代碼

使用，讓我知道

function auto_suggest(id) 
{ 
    if(typeof(Suggester)!="undefined") 
    { 
     sugg=new Suggester({"element":id,"onSelect":selecttext,"type":"mcat","placeholder":"Enter your product name","classPlaceholder":"ui-placeholder-input",minStringLengthToFetchSuggestion:1}); 
    }else 
    { 
     setTimeout(function(){ 
      auto_suggest(id)},50); 
    } 
} 
auto_suggest('text-box-id-1'); 
auto_suggest('text-box-id-2'); 
auto_suggest('text-box-id-3'); 

function selecttext(event, ui) 
{ 
    this.value = ui.item.value; 

} 

更新： -

你正在做錯事複製粘貼下面的代碼。

HTML： -

你不應該在html文檔中有相同的id。

<label>Product Name 1.</label> 
<input style="border:2px solid #7f9db9" name="product1" id="in_pc_item_moq_unit_type1" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text"> 

<label>Product Name 2.</label> 

<input style="border:2px solid #7f9db9" name="product2" id="in_pc_item_moq_unit_type2" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text"> 

<label>Product Name 3.</label> 
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input"id="in_pc_item_moq_unit_type3" maxlength="100" name="product3" placeholder="Enter your product name" type="text"> 

<label>Product Name 4.</label> 

<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type4" maxlength="100" name="product4" placeholder="Enter your product name" type="text"> 

<label>Product Name 5.</label> 

<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type5" maxlength="100" name="product5" placeholder="Enter your product name" type="text"> 

的Javascript： -

function auto_suggest(id) 
    { 
     if(typeof(Suggester)!="undefined") 
     { 
      sugg=new Suggester({"element":id,"onSelect":selecttext,"type":"mcat","placeholder":"Enter your product name 2","classPlaceholder":"ui-placeholder-input",minStringLengthToFetchSuggestion:1}); 
     }else 
     { 
      setTimeout(function(){ 
       auto_suggest(id)},50); 
     } 
    } 
    auto_suggest('in_pc_item_moq_unit_type1'); 
    auto_suggest('in_pc_item_moq_unit_type2'); 
    auto_suggest('in_pc_item_moq_unit_type3'); 
    auto_suggest('in_pc_item_moq_unit_type4'); 
    auto_suggest('in_pc_item_moq_unit_type5'); 

    function selecttext(event, ui) 
    { 
     this.value = ui.item.value; 

    }