截取並預處理jQuery-ui自動完成數據

我有一個從ajax請求抓取數據的Jquery UI自動完成代碼，因爲我抓取的數據結果已經放在自動完成附加的輸入框中。我的問題是我有其他數據沿着將與自動完成的結果一起發佈的數據。截取並預處理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); 
      }; 
     }); 
});

來源

2012-04-20 Mp de la Vega

你的想法是正確的，你必須使用一個回調爲source參數。我已經把這裏的例子：

Demo on jsFiddle

如果你讀了documentation小心地說：

第三個變化，回調，提供最大的靈活性，並且可以使用將任何數據源連接到自動完成。回調得到兩個參數：

的請求對象，與所謂的「術語」一個單一的財產，這是指來判定當前在文本輸入。例如，當用戶在城市字段中輸入「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 
      } 
     }); 
    } 
});

來源

2012-04-20 08:12:16

可以包括在選擇功能。在該功能中，您可以根據需要訪問所選項目和過程的值和標籤：

$('#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. 
    } 
});

來源

2012-12-04 14:24:27

截取並預處理jQuery-ui自動完成數據

回答

相關問題