submitAutocompleteForm不能正常工作

Question

我跟随Pluralsights使用ASP.Net MVC4视频构建应用程序。我创建了一个显示自动完成的表单，该表单正在工作，但现在我试图从自动完成列表中进行选择时提交表单。据我可以告诉我的代码是相同的教程。我错过了什么？

Javscript：otf.js

$(function() { 
     var ajaxFormSubmit = function() { 
      var $form = $(this); 

      var options = { 
       url: $form.attr("action"), 
       type: $form.attr("method"), 
       data: $form.serialize() 
      }; 


      $.ajax(options).done(function (data) { 
       var $target = $($form.attr("data-otf-target")); 
       $target.replaceWith(data); 
      }); 
      return false; 
     }; 

     var submitAutocompleteForm = function (event, ui) { 
      var $input = $(this); 
      $input.val(ui.item.label); 

      var $form = $input.parents("form:first"); 
      $form.submit(); 
     } 


     var createAutocomplete = function() { 
      var $input = $(this); 
      var options = { 
       source: $input.attr("data-otf-autocomplete"), 
       select: submitAutocompleteForm 
      }; 

      $input.autocomplete(options); 
     }; 


     $("form[data-otf-ajax='true']").submit(ajaxFormSubmit); 
     $("input[data-otf-autocomplete]").each(createAutocomplete); 
    }); 

Index.cshtml

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel> 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<form method="get" action="@Url.Action("Index")" 
     data-otf-ajax="true" data-otf-target="#restaurantList"> 

    <input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete")" /> 
    <input type="submit" value="Search By Name" /> 
</form> 


@Html.Partial("_Restaurants", Model) 

_Restaurants.cshtml

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel> 

<div id="restaurantList"> 
    @foreach (var item in Model) 
    { 
     <div> 
      <h4>@item.Name</h4> 
      <div>@item.City @item.Country</div> 
      <div>Reviews: @item.CountOfReviews</div> 
      <hr /> 
     </div> 
    } 
</div> 

家庭控制器

using OdeToFood.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace OdeToFood.Controllers 
{ 
    public class HomeController : Controller 
    { 
     OdeToFoodDb _db = new OdeToFoodDb(); 

     public ActionResult Autocomplete(string term) 
     { 
      var model = 
       _db.Restaurants 
       .Where(r => r.Name.StartsWith(term)) 
       .Take(10) 
       .Select(r => new 
       { 
        label = r.Name 
       }); 
      return Json(model, JsonRequestBehavior.AllowGet); 
     } 

     public ActionResult Index(string searchTerm = null) //string searchTerm = null adds filtering 
     { var model = 
       _db.Restaurants 
       .OrderByDescending(r => r.Reviews.Average(review => review.Rating)) 
       .Where(r => searchTerm == null || r.Name.StartsWith(searchTerm)) //adds filtering 
       .Take(10) //Only difference as above 
       .Select(r => new RestaurantListViewModel 
          { 
           Id = r.Id, 
           Name = r.Name, 
           City = r.City, 
           Country = r.Country, 
           CountOfReviews = r.Reviews.Count() 
          }); 
      if (Request.IsAjaxRequest()) 
      {//asynchinization 
       return PartialView("_Restaurants", model); 
      } 

      return View(model); 
     } 

Answer 1

首先，你需要包括三个jQuery的文件：

jquery-ui.css   // css file 
jquery-{version}.js // version you are using 
jquery-ui.js 

在视图中，输入标签是：

<input type="text" name="term" data-video-autocomplete="@Url.Action("AutoComplete")" /> 

和JavaScript将成为：

$(document).ready(function() { 

// event that should be called on autocomplete 
var createAutoComplete = function() { 
    var $input = $(this); 

    var options = { 
     source: $input.attr('data-video-autocomplete') 
    }; 

    $input.autocomplete(options);   
} 

// wire up the autocomplete to the input box 
$('input[data-video-autocomplete]').each(createAutoComplete);  

}) 

最后，在控制器的处理程序：

[HttpGet] 
public ActionResult AutoComplete(string term) 
{ 
    var list = db.Videos.Where(r => r.Name.StartsWith(term)).Take(10).Select(r => new { label = r.Name }); 

    return Json(list, JsonRequestBehavior.AllowGet); 
} 

Answer 2

尝试这段代码：

var submitAutocompleteForm = function (event, ui) { 
     var $input = $(this); 
     $input.val(ui.item.label); 
     $input.submit(); 
    }