JQueryオートコンプリート関数がロードされていません

Question

私は、テキストボックスに生徒の名前を入力するためにオートコンプリートJQuery関数に取り組んでいます。私はオートコンプリート機能を動作させるために、関連するすべてのJQueryライブラリを利用しました。私はF12キーを押すと、常に "オートコンプリートは関数ではありません"というエラーをスローします。以下は私が実行している私のコードです。私はあなたが作成している同様のデモを作成している

StudentBatch.cshtml

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<div class="form-group"> 
    <div class="col-md-12"> 
     @Html.EditorFor(model => model.StudentName, new { id = "StudentName" }) 

    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     alert("This is autocomplete function"); 
    }); 
    $(document).ready(function() { 
     $("#StudentName").autocomplete({ 
      //autocomplete: { 
      // delay: 0, 
      // minLength: 1, 
      source: function (request, response) { 
       $.ajax({ 
        url: "/Student/Create", 
        type: "POST", 
        dataType: "json", 
        data: { Prefix: request.term }, 
        success: function (data) { 
         try { 
          response($.map(data, function (item) { 
           return { label: item.StudentName, value: item.StudentName }; 
          })) 
         } catch (err) { } 
        } 
       }) 
      }, 
      messages: { 
       noResults: "jhh", results: "jhjh" 
      } 

     }); 

    }); 
</script> 

StudentController.cs

[HttpPost] 
public JsonResult Create(string Prefix) 
{ 
    CreateUser user = new CreateUser(); 
    string stdid = "fae30ef0-08b2-4490-a389-3c8eb0a7cc53"; 
    var StudentList = user.GetAllUsers().ToList().Where(u => u.FirstName == Prefix && u.usertypeid == stdid).ToString(); 
    return Json(StudentList, JsonRequestBehavior.AllowGet); 
} 

Answer 1

。

モデル

public class CreateUser 
{ 
    public string StudentName { get; set; } 
    public string StudentId { get; set; } 
} 

コントローラ

public class StudentController : Controller 
{ 
    // GET: Student 
    public ActionResult Create() 
    { 
     return View(); 
    } 


    [HttpPost] 
    public JsonResult Create(string prefix) 
    { 
     List<CreateUser> studentList = new List<Models.CreateUser>() 
     { 
      new CreateUser { StudentId = "1" , StudentName = "Student1"}, 
      new CreateUser { StudentId = "2" , StudentName = "Student2"}, 
      new CreateUser { StudentId = "3" , StudentName = "Student3"}, 
      new CreateUser { StudentId = "4" , StudentName = "Student4"}, 
      new CreateUser { StudentId = "5" , StudentName = "Student5"}, 
      new CreateUser { StudentId = "6" , StudentName = "Student6"}, 
      new CreateUser { StudentId = "7" , StudentName = "Student7"}, 
     }; 

     var searchlist = (from student in studentList 
      where student.StudentName.Contains(prefix) 
      select student).ToList(); 

     return Json(searchlist, JsonRequestBehavior.AllowGet); 
    } 
} 

ビュー

@model WebApplication6.Models.CreateUser 
@{ 
    Layout = null; 
} 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> 
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" /> 
<style> 
    .ui-autocomplete { 
     max-height: 100px; 
     overflow-y: auto; 
     /* prevent horizontal scrollbar */ 
     overflow-x: hidden; 
    } 
    /* IE 6 doesn't support max-height 
    * we use height instead, but this forces the menu to always be this tall 
    */ 
    * html .ui-autocomplete { 
     height: 100px; 
    } 

    .ui-autocomplete-input { 
     width: 300px; 
    } 
</style> 

<div class="form-group"> 
    <div class="col-md-12"> 
     @Html.EditorFor(model => model.StudentName, new { id = "StudentName" }) 
    </div> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#StudentName").autocomplete({ 
      //autocomplete: { 
      // delay: 0, 
      // minLength: 1, 
      source: function (request, response) 
      { 
       $.ajax({ 
        url: "/Student/Create", 
        type: "POST", 
        dataType: "json", 
        data: { prefix: request.term }, 
        success: function(data) { 
         try { 
          response($.map(data, 
           function (item) 
           { 
            return { label: item.StudentName, value: item.StudentName }; 
           })); 
         } catch (err) { 
         } 
        } 
       }); 
      }, 
      messages: 
       { 
       noResults: "jhh", results: "jhjh" 
      } 

     }); 

    }); 
</script> 

出力