jquery自動完成 - 如何顯示字段1 +字段2，並在選定時，只需填寫字段1在文本框中

Question

我正在c＃應用程序中，我已實現下面的函數來顯示自動完成功能，它工作正常。 我想要做的唯一事情是，當搜索時它顯示項目，那些顯示的項目應該顯示爲字段1 +字段2，但是當用戶選擇一個項目時，字段1應該填滿該文本框，所以基本上顯示項目和填寫項目應該是不同的。 這是我的工作代碼。

<input type="text" id="txtInfo" class="form-control" > 

<script type="text/javascript"> 

    $(document).ready(function() {$('#txtInfo').autocomplete({ 
     serviceUrl: 'Controller/MyActionMethod' , 
     disabled: false, 
     minChars: 0, 
     dataType: 'json', 
     type: 'GET', 
     async: false, 
     deferRequestBy: 800, 
     transformResult: function (response) { 
      if (response != null) { 
       return { 
        suggestions: $.map(response, function (dataItem) { 
         return { 
          value: dataItem, data: dataItem 
         }; 
        }) 
       }; 
      } 
     }   
    }); 
}); 

public JsonResult MyActionMethod(string query) 
    { 
      List<SelectListItem> MyIems = Session["myVal"] as List<SelectListItem>; 
    //MyIems has Text and Value, Text is the one I want to display and Value is the one which I want to get fill up 
    // in the txtInfo when user selects it. 
    // For example, if user searches and txtInfo displays text "Full Name", when he selects that, txtInfo should have 
    // filled up with "Value" of that item. 
      List<string> result = new List<string>(); 
      List<string> displayResult = new List<string>(); 
      foreach (var r in MyIems) 
      { 
       if (r.Text.ToLower().Contains(query.ToLower()) || r.Value.ToLower().Contains(query.ToLower())) 
       { 
       if (!result.Contains(r.Value)) result.Add(r.Value); 
       } 
      } 
      return Json(result, JsonRequestBehavior.AllowGet); 

    } 

任何幫助，將不勝感激， 在此先感謝

Answer 1

你必須把分隔符例如管道，逗號等連接在一起的響應，然後分割這個值並顯示你所需要的。

例子：

var MyResponse = Field1|Field2|...n; 
var SplitedResp = MyResponse.split("|"); 
alert(SplitedResp[0]); // has Field1 value 
alert(SplitedResp[1]); // has Field2 value 

更新：假設您返回一個JSON對象用分隔符前面說過和鍵名標籤，這裏是所有方法的一個例子，你需要，focus，select，search & response

$("#txtInfo").autocomplete({ 
      delay: 500, 
      minLength: 2, 
      source: "Controller/MyActionMethod", 
      focus: function (event, ui) { 
       event.preventDefault(); 
       var SplitedResp = ui.item.label.split('|'); 
       $(this).val(SplitedResp[0]); // visible text to user 
      }, 
      select: function (event, ui) { 
       event.preventDefault(); 
       var SplitedResp = ui.item.label.split('|'); 
       $(this).val(SplitedResp[0]); 
       $(this).attr("custom_attr",SplitedResp[1]); // value of the selected result 
      }, 
      search: function(){ 
         // you can add a loading effect 
         $(this).addClass('loading'); 
      }, 
      response: function (event,ui) { 
       //you can check if the length of return has nothing 
       //and inform user about that with a message. 
      }    
});