jQuery自動完成組件

Question

我正面臨自動完成的一個奇怪問題。

第一個問題：

基礎上，教程中here，只有找到的項目的第一個字母顯示的自動完成的項目清單

這裏有一個例子：

我在調試時的動作

虛擬數據返回，總是th Ë一樣的，不管搜索模式只是用於測試

在渲染視圖，這是發生了什麼：

的JavaScript這種情況下的自動完成功能如下：

$("#Email").autocomplete('@Url.Action("FindEmail", "Administration")', 
{ 
    dataType: 'json', 

    parse: function(data) { 
     var rows = new Array(); 

     for (var i = 0; i < data.length; i++) { 

      rows[i] = { 
       data: data[i].Value, 
       value: data[i].Value, 
       result: data[i].Value 
      }; 
     } 

     return rows; 

    }, 
    width: 300, 
    minLength: 3, 
    highlight: false, 
    multiple: false 
     }); 

第二期：

我已經改變了我的代碼以使用更舒適的Ajax調用，這取決於Model映射，而不像前面的教程中那樣發送aq和limit參數，正如我在其他許多教程中看到的，但Ajax通話不會觸發，甚至不會給我一個錯誤。

我對這種情況下的代碼是基於這個Stack Overflow Answer

這裏是我的控制器和視圖代碼相關：

 //[HttpPost] 
     [SpecializedContextFilter] 
     [Authorize] 
     [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] 
     public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit 
     { 
      //Just a dummy implementation 
      var rez = new List<ValueModel> 
      { 
       new ValueModel {Description = "atest1@test.com", Value = "atest1@test.com"}, 
       new ValueModel {Description = "atest2@test.com", Value = "atest2@test.com"}, 
       new ValueModel {Description = "atest3@test.com", Value = "atest3@test.com"}, 
       new ValueModel {Description = "atest4@test.com", Value = "atest4@test.com"} 

      }; 

      //var retValue = rez.Select(r => new { email = r.Value }).OrderBy(x => x).Take(10); 

      //return Json(retValue, JsonRequestBehavior.AllowGet); 

      return Json(rez, JsonRequestBehavior.AllowGet); 
     } 

查看的JavaScript：

$("#Email").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: '@Url.Action("FindEmail", "Administration")', 
       type: "POST", 
       dataType: "json", 

       data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() }, 

       success: function(data) { 
        response($.map(data, function(item) { 
         return { label: item.Value, value: item.Value, id: item.Value }; 
        })); 
       }, 
       select: function(event, ui) { 
        $("input[type=hidden]").val(ui.item.id); 
       } 
      }); 
     } 
    }); 

Firefox的控制檯視圖：

我已經嘗試了很多第二種方案的代碼，其中大部分都是Stack Overflow答案，但沒有任何事情發生！

我是我缺少的東西？

注：jQuery插件都包括在內，阿賈克斯已經在同一個頁面上工作，所以我不知道什麼問題

感謝您的幫助。

Answer 1

這是一個完整的工作示例，請參閱屏幕截圖。

這些是我用來獲得第二個例子工作的步驟。

腳本引用/標記/ JS

<script src="~/Scripts/jquery-1.8.2.js"></script> 
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script> 
<input id="ConferenceId" value="1" /> 
<div class="ui-widget"> 
    <label for="Email">Email: </label> 
    <input id="Email"> 
</div> 
<script type="text/javascript"> 
    $("#Email").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '@Url.Action("FindEmail", "Administration")', 
       type: "POST", 
       dataType: "json", 

       data: { email: $("#Email").val(), conferenceId: $("#ConferenceId").val() }, 

       success: function (data) { 
        response($.map(data, function (item) { 
         return { label: item.Value, value: item.Value, id: item.Value }; 
        })); 
       }, 
       select: function (event, ui) { 
        $("input[type=hidden]").val(ui.item.id); 
       } 
      }); 
     } 
    }); 
    </script> 

模式

public class RegistrationModel 
    { 
     public string Email { get; set; } 
     public string ConferenceId { get; set; } 
    } 

    public class ValueModel 
    { 
     public string Description { get; set; } 
     public string Value { get; set; } 
    } 

控制器動作

我不得不添加[HttpPost]屬性。

[HttpPost] 
public JsonResult FindEmail(RegistrationModel model) //Notice the use of model instead of string q and string limit 
{ 
    //Just a dummy implementation 
    var rez = new List<ValueModel> 
    { 
     new ValueModel {Description = "atest1@test.com", Value = "atest1@test.com"}, 
     new ValueModel {Description = "atest2@test.com", Value = "atest2@test.com"}, 
     new ValueModel {Description = "atest3@test.com", Value = "atest3@test.com"}, 
     new ValueModel {Description = "atest4@test.com", Value = "atest4@test.com"} 

    }; 

    return Json(rez, JsonRequestBehavior.AllowGet); 
} 

屏幕抓取