Javascript 使用jquery重用不同形式的自动完成输入字段

我有两种不同的表格“表格1”和“表格2”。。这两个表单都有一个输入字段，其中将以关键字作为输入显示各自的建议选项。它们有相同的名称，ajax函数将调用相同的php文件来检索数据

形式就像

表格1：-

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>");
    }

}

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 id=新数组（）；
//初始化的
$（“”）。插入后面（输入框）；
$（主持有人）.addClass（“fb_持有人”）；
$（mainHolder.val（“”.focus（）；
//关于文本框显示列表的焦点
$（inputBox）.keyup（函数（事件）{
var p=$（主要持有人）；
var offset=p.offset（）；
//创建ajax请求并获取所有以名称XXX开头的好友名称
var关键字=$（inputBox）.val（）；
选择的var=ids；
//var selected=$（“#selected_id”）.val（）；
//var theArray=selected.split（“，”）；
//删除选择好友类
//$（mainHolder.find（“.selected friend”）.removeClass（“selected friend”）；
//$（mainHolder.find（“.selected friend”）.find（“#rmv_标记”）.css（“color”，“#8f8f”）；
if（关键字.length）
{
如果（event.keyCode！=40&&event.keyCode！=38&&event.keyCode！=13）
{
//$（ajax_response）.css（“左”，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））；
如果（ajaxFilePath！=“”）
{
$.ajax({
类型：“POST”，
url:“http://localhost/corridor/index.php/posts/search_to_tag_frnds?added_ids[]=“+ids，
数据：“数据=”+关键字，
成功：函数（rep）{
如果（rep！=0）
$（ajax_response）.html（rep.css（“显示”、“块”）；
其他的
$（“.list”）.css（“显示”、“无”）；
}
});
}
}
其他的
{
$（“li.selected”）.removeClass（“selected”）；
开关（event.keyCode）
{
案例40：
{
发现=0；
$（“.list li”）。每个（函数（）{
如果（$（this.attr（“类”）=“选定”）
发现=1；
});
如果（找到==1）
{
var sel=$（“li[class='selected']）；
//检查his是否是列表中的最后一个元素
//如果是，则将所选类添加到列表中的第一个元素
如果（sel.next（）.text（）==“”）
$（“.list li:first”）.addClass（“selected”）；
其他的
sel.next（）.addClass（“选定”）；
//删除从上一项中选择的类
选择移除类（“选定”）；
}
其他的
$（“.list li:first”）.addClass（“selected”）；
}
打破
案例38：
{
发现=0；
$（“.list li”）。每个（函数（）{
如果（$（this.attr（“类”）=“选定”）
发现=1；
});
如果（找到==1）
{
var sel=$（“li[class='selected']）；
//检查his是否是列表中的最后一个元素
//如果是，则将所选类添加到列表中的第一个元素
如果（sel.prev（）.text（）=“”）
$（“.list li:last”）.addClass（“选定”）；
其他的
sel.prev（）.addClass（“选定”）；
//删除从上一项中选择的类
选择移除类（“选定”）；
}
其他的
$（“.list li:last”）.addClass（“选定”）；
}
打破
案例13：
$（ajax_response）.css（“显示”、“无”）；
var值=$（“li[class='selected']）。查找（“a”）.attr（“值”）；
addFriend（$（“li[class='selected']）。text（），value）；
打破
}
}
}
其他的
$（ajax_响应）.fadeOut（“慢”）；
});
//单击列表项后，将该朋友标记为选中
$（“#rmv_标记”）.live（“单击”，函数（）{
var发现=”；
//删除选定的朋友
$（this.parent（）.css（“显示”、“无”）；
//获取所选项目的id
var index=$（this.parent（“.added”）.attr（“id”）；
//在ids数组中查找项索引
对于（i=0；i您不能有两个具有相同ID的元素。因此，当您引用
$（“#选定的_ID”）
时，浏览器/JavaScript将只影响第一个元素

您需要为这两个元素提供不同的ID，并且在JavaScript中，引用哪一个元素（最好将其作为参数传递给函数，这样您就不会复制代码。）
@user2131695您好，我发现您也有同样的问题……您能验证我的脚本吗。。
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>");
    }

}