Wie Sie die gleiche Autocomplete-Aktion auf mehrere Formularfelder anwenden

Question

Ich versuche, mehrere Produkte hinzuzufügen.Für den Namen der einzelnen Produkte möchte ich dem Benutzer automatisch vorschlagen, aber ich bin in der Lage zu geben, Auto vorschlagen nur für das erste Produkt.Kann jede man sagt mir, was ich falsch mache.

Mein HTML-Code

<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"> 

Mein Java-Script-Code

< 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

Sie eine gemeinsame Funktion

Verwenden Sie den folgenden Code für diese verwenden und mich

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; 

} 

wissen lassen, Aktualisierung: -

Sie tun etwas falsch Kopieren Sie den folgenden Code.

HTML: -

Sie sollten nicht gleiche ID in das HTML-Dokument haben.

<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; 

    }