如何将相同的自动完成动作应用于多个表单域

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; 

    }