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

您不能拥有两个具有相同ID的元素。因此，当您引用$("#selected_ids")时，浏览器/ JavaScript只会影响第一个。

您需要为这两个元素提供不同的ID，并在JavaScript中引用哪一个（最好将其作为参数传递给函数，这样您就不会只复制代码。）

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

1 个答案: