jqueryui自动完成呈现服务器返回的HTML [英] jqueryui autocomplete render HTML returned by server
问题描述
我有一个带有输入文本框的简单页面.该文本框绑定到对服务器进行AJAX调用的jQuery ui自动完成功能.我的服务器端代码是一个ASP.NET MVC站点. 与在Internet上找到的大多数示例相比,我唯一的区别是服务器端代码返回PartialView(html代码)作为结果而不是JSON .我看到正在发生AJAX调用,并且在AJAX成功事件中也看到了HTML响应.
I have a simple page with an input text-box. The text box is bound to jquery ui autocomplete that makes an AJAX call to the server. My server side code is an ASP.NET MVC site. The only difference I have as compared to most examples found over the Internet is that my Server side code returns a PartialView (html code) as results instead of JSON. I see the AJAX call happening and I see the HTML response in the AJAX success event as well.
我的问题是如何绑定此HTML数据以显示在自动完成"中?
到目前为止,我的代码是:
The code I have so far is:
$(#quick_search_text").autocomplete({ minLength:3, html:是的, autoFocus:是的, 来源:功能(请求,响应){
$("#quick_search_text").autocomplete({ minLength: 3, html: true, autoFocus: true, source: function (request, response) {
$.ajax({
type: "POST",
url: "serversideurl",
data: "{ 'SearchTerm': '" + request.term + "', 'SearchCategory': '" + $("#quick_search_category").val() + "' }",
contentType: "application/json; charset=utf-8",
dataType: "html",
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
},
success: function (data) {
//THIS IS WHERE MY HTML IS RETURNED FROM SERVER SIDE
//HOW DO I BIND THIS TO JQUERY UI AUTOCOMPLETE
}
});
},
select: function (event, ui) {
},
response: function (event, ui) {
console.log(ui);
console.log(event);
}
});
推荐答案
这有效: 1)在您的控制器中创建一个动作,并将RouteConfig设置为开始该动作
This works: 1) Create an action in your controller and set the RouteConfig to start this action
public class HomeController : Controller
{
public ActionResult Index20()
{
MyViewModel m = new MyViewModel();
return View(m);
}
创建没有任何类型母版页的视图
Create a view without any type of master page
添加此视图模型:
public class MyViewModel
{
public string SourceCaseNumber { get; set; }
}
转到管理Nuget程序包"或"PM控制台"并添加到MVC 5项目-Tim Wilson编写的用于MVC 5模型的Typeahead.js
Go to Manage Nuget Packages or PM Console and add to MVC 5 project - Typeahead.js for MVC 5 Models by Tim Wilson
将添加的HtmlHelpers.cs的命名空间更改为System.Web.Mvc.Html并重建
Change the namespace for the added HtmlHelpers.cs to System.Web.Mvc.Html and rebuild
添加此类:
public class CasesNorm
{
public string SCN { get; set; }
}
将以下方法添加到您的控制器中:
Add these methods to your controller:
private List<Autocomplete> _AutocompleteSourceCaseNumber(string query)
{
List<Autocomplete> sourceCaseNumbers = new List<Autocomplete>();
try
{
//You will goto your Database for CasesNorm, but if will doit shorthand here
//var results = db.CasesNorms.Where(p => p.SourceCaseNumber.Contains(query)).
// GroupBy(item => new { SCN = item.SourceCaseNumber }).
// Select(group => new { SCN = group.Key.SCN }).
// OrderBy(item => item.SCN).
// Take(10).ToList(); //take 10 is important
CasesNorm c1 = new CasesNorm { SCN = "11111111"};
CasesNorm c2 = new CasesNorm { SCN = "22222222"};
IList<CasesNorm> aList = new List<CasesNorm>();
aList.Add(c1);
aList.Add(c2);
var results = aList;
foreach (var r in results)
{
// create objects
Autocomplete sourceCaseNumber = new Autocomplete();
sourceCaseNumber.Name = string.Format("{0}", r.SCN);
sourceCaseNumber.Id = Int32.Parse(r.SCN);
sourceCaseNumbers.Add(sourceCaseNumber);
}
}
catch (EntityCommandExecutionException eceex)
{
if (eceex.InnerException != null)
{
throw eceex.InnerException;
}
throw;
}
catch
{
throw;
}
return sourceCaseNumbers;
}
public ActionResult AutocompleteSourceCaseNumber(string query)
{
return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet);
}
信用转到 http://timdwilson.github.io/typeahead-mvc-model /
这篇关于jqueryui自动完成呈现服务器返回的HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!