インターセプトと前処理jQuery-uiオートコンプリートデータ

Question

オートコンプリートが添付されている入力ボックスに結果が既に格納されているデータを取得するため、Ajaxリクエストからデータを取得するJquery UIオートコンプリートコードがあります。私の問題は、私はオートコンプリートの結果で掲示されるデータに沿って他のデータを持っているということです。

私は必要なものをすべて掴み、デリミタ付きの単一の文字列に入れようとしていたので、クライアント側で分割することができます。私は隠しテキストフィールド

に他のデータを保存しておきたいことは、ここに私のコードです

<div id="01ac091c834d81b41f0ef4b6eb09cde90bb9aa1a" style="display:none" title="Add Member"> 
     Type the name of the member 
     <br> 
     <br> 
     <div style="text-align:center"> 
      <input type="text" id="txtUserFind" size="35"> 
     </div> 
     <input type="hidden" id="hidtxtUserFind-nickname"> 
     <input type="hidden" id="hidtxtUserFind-userhash"> 
     <input type="hidden" id="hidtxtUserFind-picture"> 
     <input type="hidden" id="hidtxtUserFind-sex"> 
    </div> 
    <script type="text/javascript"> 
    head(function() { 


     $(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled"); 

     $("#txtUserFind").keydown(function(){ 
      $(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled"); 
     }); 


     $("#txtUserFind").change(function(){ 

     var userdetails = $("#txtUserFind").val().split(";"); 
     alert($("#txtUserFind").val()); 

     /* 
     0 profiles.nickname, 
     1 profiles.firstname, 
     2 profiles.surname, 
     3 users.user_hash, 
     4 profiles.sex, 
     5 profiles.picture 
     */ 

     $("input#hidtxtUserFind-nickname").val(userdetails[0]); 
     $("input#txtUserFind").val(userdetails[1] + " " + userdetails[2]); 
     $("input#hidtxtUserFind-userhash").val(userdetails[3].replace("u-","")); 
     $("input#hidtxtUserFind-sex").val(userdetails[4]); 
     if(userdetails.length > 5){ 
      $("input#hidtxtUserFind-picture").val(userdetails[5]); 
     } 

     }); 

     $("<?php echo $tagmemberbtn; ?>").click(function(){ 
      $("#01ac091c834d81b41f0ef4b6eb09cde90bb9aa1a").dialog({ 
       modal:true, 
       resizable: false, 
       height:250, 
       width:400, 
       hide:"fade", 
       open: function(event, ui){ 
        searchdone = false; 
        $(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled"); 
       }, 
       beforeClose: function(event, ui){ 
        $("#txtUserFind").val(""); 
       }, 
       buttons:{ 
        "Select User":function(){ 
         $(this).dialog("close"); 
        }, 
        "Close":function(){ 
         searchdone = false; 
         $("#txtUserFind").val(""); 
         $(this).dialog("close");     
        } 
       } 
      }); 
     }); 

     $(function() { 
      var cache = {}, 
      lastXhr; 
      $("#txtUserFind").autocomplete({ 
       source:function(request,response) { 
        var term = request.term; 
        if (term in cache) { 
         response(cache[term]); 
         return; 
        } 
        lastXhr = $.getJSON(cvars.userburl+"getusers", request, function(data,status,xhr) { 
         stopAllAjaxRequest(); 
         cache[ term ] = data; 
         if (xhr === lastXhr) { 
          response(data); 
         } 
        }); 
       }, 
       minLength: 1, 
       select: function(event, ui) { 

        $(":button:contains('Select User')").removeAttr("disabled").removeClass("ui-state-disabled"); 
       } 
      }).data("autocomplete")._renderItem = function(ul,item){ 
       if(item.picture==null){ 
        //know if girl or boy 
        if(item.sex<=0){ 
         item.picture = cvars.cthemeimg + "noimagemale.jpg"; 
        } 
        else{ 
         item.picture = cvars.cthemeimg + "noimagefemale.jpg"; 
        } 
       } 
       else{ 
        item.picture = cvars.gresuser + "hash=" + item.user_hash.replace("u-","") +"&file="+item.picture.replace("f-",""); 
       } 
       var inner_html = '<a><div class="autocomplete-users-list_item_container"><div class="autocomplete-users-image"><img src="' + item.picture + '" height="35" width="35"></div><div class="label">' + item.nickname + '</div><div class="autocomplete-users-description">' + item.firstname + " " + item.surname + '</div></div></a>'; 
       return $("<li></li>") 
        .data("item.autocomplete",item) 
        .append(inner_html) 
        .appendTo(ul); 
      }; 
     }); 
}); 

Answer 1

あなたのアイデアは権利である、あなたはsourceパラメータとしてコールバックを使用する必要があります。あなたは慎重にdocumentationを読めば、それは言う

Demo on jsFiddle

：

第三変動、コールバックは、最大限の柔軟性を提供し、 を使用することができます私は一緒にここに例を入れています任意のデータソースをオートコンプリートに接続します。コールバック は、2つの引数を取得します。

"term"という1つのプロパティを持つリクエストオブジェクトで、 を現在テキスト入力の値に参照しています。たとえば、ユーザー が都市のフィールドに「new yo」と入力した場合、オートコンプリートの用語は 「new yo」になります。

応答コールバックで、単一の引数に のデータが含まれているとユーザに示唆されます。このデータは、 提供された用語に基づいてフィルタリングされ、 単純なローカルデータ（文字列配列またはラベル/値/両方の属性を持つオブジェクト配列 プロパティ）の上記のいずれかの形式にすることができます。要求中に にエラーを処理するためのカスタムソースコールバックを提供する場合は重要です。エラーが発生した場合でも、必ず コールバックをコールバックする必要があります。これにより、ウィジェット は常に正しい状態になります。だからここ

は、私は、デモで使用される実装例である：

$("#autocomplete").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "/echo/html/", // path to your script 
      type: "POST",  // change if your script looks at query string 
      data: {    // change variables that your script expects 
       q: request.term 
      }, 
      success: function(data) { 
           // this is where the "data" is processed 
           // for simplicity lets assume that data is a 
           // comma separated string where first value is 
           // the other value, rest is autocomplete data 
           // the data could also be JSON, XML, etc 
       var values = data.split(","); 
       $("<div/>").text("Other value: " + values.shift()).appendTo("body"); 
       response(values); 
      }, 
      error: function() { 
       response([]); // remember to call response() even if ajax failed 
      } 
     }); 
    } 
}); 

Answer 2

あなたは選択の機能を含めることができます。その機能内では、必要に応じて選択したアイテムの値とラベルにアクセスして、必要に応じて処理することができます。

$('#input_id').autocomplete({ 
    source:"www.example.com/somesuch", 
    select: function(event, ui){ 
     var value = ui.item.value; 
     valueArray = value.split('whatever delimiter here'); 
     //do what you will with the values 
     ui.item.value = ui.item.label; //This ensures only the label is displayed after processing. 
    } 
});