Повторное использование поля ввода с автоматическим заполнением в разных формах с использованием jquery

Question

У меня есть две разные формы: «# form1» и «# form2». У обеих форм есть поле ввода, в котором будут показаны соответствующие предлагаемые варианты с ключевым словом в качестве ввода , Они имеют одинаковые имена, а функция ajax будет вызывать один и тот же файл php для извлечения данных.

формы как

Form1: -

form2:- 
<form id="#form2"> 

автозаполнения сценарий как

var mainHolder = ".tag_holder"; 
var inputBox  = ".sharing_with"; 
var ajaxFilePath = "http://localhost/corridor/index.php/posts/search_to_tag_frnds"; 

var ajax_response = ".ajax_response"; 
var ids = new Array(); 

// initialization's 
$("<div class='ajax_response'></div>").insertAfter(inputBox); 
$(mainHolder).addClass("fb_holder"); 
$(mainHolder).val("").focus(); 


// on focus of textbox show list 

$(inputBox).keyup(function(event){ 
    var p = $(mainHolder); 
    var offset = p.offset(); 

    // create ajax request and get all the friend names starting with name XXX 
    var keyword = $(inputBox).val(); 
    var selected = ids; 
    //var selected = $("#selected_ids").val(); 
    //var theArray = selected.split(", "); 

    // remove select-friend class 
    //$(mainHolder).find(".selected-friend").removeClass("selected-friend"); 
    //$(mainHolder).find(".selected-friend").find("#rmv_tag").css("color","#8F8F8F"); 

    if(keyword.length) 
    { 
     if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) 
     { 
      // $(ajax_response).css("left",parseInt(offset.left)); 
      // $(ajax_response).css("top",parseInt(offset.top + $(mainHolder).height())); 
      $(ajax_response).css("z-index","1040"); 
      $(ajax_response).css("width",parseInt($(mainHolder).width()/2)); 

      if(ajaxFilePath != "") 
      { 
       $.ajax({ 
        type: "POST", 
        url: "http://localhost/corridor/index.php/posts/search_to_tag_frnds?added_ids[]="+ids, 
        data: "data="+keyword, 
        success: function(rep){ 
        if(rep != 0) 
         $(ajax_response).html(rep).css("display","block"); 
        else 
         $(".list").css("display","none"); 
        } 
       }); 
      } 
     } 
     else 
     { 
      $("li .selected").removeClass("selected"); 
      switch (event.keyCode) 
      { 
      case 40: 
      { 
        found = 0; 
        $(".list li").each(function(){ 
        if($(this).attr("class") == "selected") 
         found = 1; 
        }); 
        if(found == 1) 
        { 
        var sel = $("li[class='selected']"); 
        // check if his is a last element in the list 
        // if so then add selected class to the first element in the list 
        if(sel.next().text() == "")     
         $(".list li:first").addClass("selected"); 
        else 
         sel.next().addClass("selected"); 
        // remove class selected from previous item 
        sel.removeClass("selected"); 
        } 
        else 
        $(".list li:first").addClass("selected"); 
       } 
      break; 
      case 38: 
      { 
        found = 0; 
        $(".list li").each(function(){ 
        if($(this).attr("class") == "selected") 
         found = 1; 
        }); 
        if(found == 1) 
        { 
        var sel = $("li[class='selected']"); 
        // check if his is a last element in the list 
        // if so then add selected class to the first element in the list 
        if(sel.prev().text() == "")     
         $(".list li:last").addClass("selected"); 
        else 
         sel.prev().addClass("selected"); 
        // remove class selected from previous item 
        sel.removeClass("selected"); 
        } 
        else 
        $(".list li:last").addClass("selected"); 
      } 
      break; 
      case 13: 

       $(ajax_response).css("display","none"); 
       var value = $("li[class='selected']").find("a").attr("value"); 
       addFriend($("li[class='selected']").text(),value); 
      break; 
      } 
     } 
    } 
    else 
     $(ajax_response).fadeOut("slow"); 
}); 
// on click of list item mark that friend as selected 

$("#rmv_tag").live("click",function(){ 
    var found = ""; 
    // remove selected friend 
    $(this).parent().css("display","none"); 
    // get id of selected item 
    var index = $(this).parent(".added").attr("id"); 
    // find items index in ids array 
    for(i=0;i<ids.length;i++){ 
     if(ids[i] == index){ 
      found = i; 
      continue; 
     } 
    } 
    // remove selected index 
    if(index != " " || index != "undefined") 
     ids.splice(parseInt(found),1); 
    // print updated ids 
    $("#selected_ids").val(ids); 
}); 


$(inputBox).focus(function(){ 
    // remove class 
    $(mainHolder).find(".selected-friend").removeClass("selected-friend"); 
    $(mainHolder).find("#rmv_tag").css("color","#6abf88"); 
}); 
$(".list li").live("mouseover",function() { 
     $("li[class='selected']").removeClass("selected"); 
     $(this).addClass("selected"); 
}); 
$(".list li").live("mouseout",function() { 
     $("li .selected").removeClass("selected"); 
     $(this).removeClass("selected"); 
}); 
$(".add_tag").live("click",function() { 
    var text = $(this).text(); 
    var id = $(this).find("a").attr("value"); 
    // mark friend as selected and add to selected ist 
    addFriend(text,id); 
}); 
$(mainHolder).click(function(){ 
    $(inputBox).focus(); 
}); 

$(".added").live("mouseover",function(){ 
    $(this).addClass("added-hover"); 
}); 
$(".added").live("mouseout",function(){ 
    $(this).removeClass("added-hover"); 
    $(this).addClass("added"); 
}); 
$(".added").live("click",function(){ 
    $(mainHolder).find(".selected-friend").removeClass("selected-friend"); 
    $(this).addClass("selected-friend"); 
    $(this).find("#rmv_tag").css("color","white"); 
}); 
function addFriend(text,id) { 
    if(text && ids.length < 5) 
    { 

     if($(mainHolder).find("div").attr("class") != "added"){ 
      $("<div class='alert added' class='lists' value='"+id+"'>"+text+"<span id='rmv_tag'>x</span><input type='hidden' class='added_ids[]' name='added_ids[]' value="+id+" /></div>").insertBefore(mainHolder); 

     } 
     else{ 
      $("<div class='added' class='lists' value='"+id+"'>"+text+"<span id='close'>x</span></div>").insertAfter($(inputBox).prev()); 
     } 
     // hide list 
     $(".list").css("display","none"); 
     // clear textbox 
     $(inputBox).val("").focus(); 
     // insert selected id to array 
     ids.push(id); 
    } 
    else 
    { 
     alert("maximum number of users are already tagged"); 
     $(inputBox).val("").focus(); 
     $(inputBox).replaceWith("<span class='text-muted' style='color:#555;font-size:11px;'> Max 5 can be tagged </span>"); 
    } 

} 

Проблема для первой формы я получаю предложения, но для второго он не работает.

Пожалуйста, помогите ...

Answer 1

Вы не можете иметь два элемента с одинаковым идентификатором. Поэтому, когда вы ссылаетесь на $("#selected_ids"), браузер/JavaScript просто повлияет на первый.

Вы должны дать два элемента различных идентификаторов, и в вашем JavaScript, обратитесь к которой один (предпочтительно путем передачи его в качестве параметра в функцию, так что вы не просто дублировать код.)