来自 XML 的 JQuery 自动完成(动态结果)
JQuery AutoComplete From XML (Dynamic Results)
也许我不理解这个概念(我是AJAX/javascript/Web新手)。我正在使用 JQuery 自动完成功能,如果我指定一个小的、有限的项目平面文件(建议.xml),该功能工作正常,但是当我使用实际的生产数据文件 (3 MB) 的建议时,脚本根本不起作用。
因此,我创建了一个基于文本框中的字符生成XML的Web服务,但似乎此JQuery不会在每次按键上运行,而仅在页面首次加载时运行。显然,要使此函数有任何用途,它需要在用户键入输入字段时动态获取结果。
$(document).ready(function () {
var myArr = [];
$.ajax({
type: "GET",
// this line always sends the default text; not what the user is typing
url: "Suggestions.aspx?searchString=" + $("input#txtSearch").val(),
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function (data) {
alert("XML File could not be found");
}
});
function parseXml(xml) {
//find every query value
$(xml).find("result").each(function () {
myArr.push({ url: $(this).attr("url"), label: $(this).attr("name") + ' (' + $(this).attr("type").toLowerCase() + ')' });
});
}
function setupAC() {
$("input#txtSearch").autocomplete({
source: myArr,
minLength: 3,
select: function (event, ui) {
$("input#txtSearch").val(ui.item.label);
window.location.href = ui.item.url;
//alert(ui.item.url + " - " + ui.item.label);
}
});
}
});
在服务器上,我希望看到一些与用户在搜索框中键入的字符相对应的请求,但我收到一条消息:
2013-10-18 22:02:04,588 [11] DEBUG baileysoft.mp3cms.Site - QueryString params: [searchString]:'Search'
我的建议平面文件对于 JQuery 来说似乎很大,并且我的 Web 服务脚本永远不会被调用,除非第一次加载页面。
如果我无法在用户键入时跑回数据库(通过我的 Web 服务)以获取建议,如何在用户在搜索框中键入时动态生成建议?
好的,我都解决了。
在ASPNET方面;我创建了一个表单来接收和响应 AJAX:
Response.ContentType = "application/json";
var term = Request.Form["term"];
var suggestions = GetSuggestions(term); // Database results
if (suggestions.Count < 1)
return;
var serializer = new JavaScriptSerializer();
Response.Write(serializer.Serialize(suggestions);
在 AJAX 端,我修改了 js 函数:
$("input#txtSearch").autocomplete({
minLength: 3,
source: function (request, response) {
$.ajax({
url: "Suggestions.aspx",
data: { term: $("input#txtSearch").val() },
dataType: "json",
type: "POST",
success: function (data) {
response($.map(data, function (obj) {
return {
label: obj.Name,
value: obj.Url
};
}));
}
});
},
select: function (event, ui) {
$("input#txtSearch").val(ui.item.label);
window.location.href = ui.item.value;
}
});
现在一切都按预期工作。
希望这可以帮助其他人,他们可能会在试图为ASPNET找出JQuery的东西时陷入困境。
相关文章:
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- 动态创建的元素上的事件侦听器仅对第一个结果起作用
- 我使用ajax对我的网站的详细信息页面进行一些动态处理,但我得到了非常不好的结果
- 使用动态变量名更新JSON中的结果
- 为多个表单动态指定输出ajax成功结果的位置
- 使用html/php编辑动态创建的结果集
- 如何在PHP中包含动态Javascript页面的静态HTML结果
- 根据所选排序动态更改结果
- 使用 jQuery 添加多个动态值并输出结果
- 向动态创建的元素添加事件的结果很奇怪
- 动态 CRM 2011 FetchXml 结果与架构名称串联
- 动态结果数组需要使用 Angular JS 与不同布局的表绑定
- 动态添加 CSS 类会导致紧接着出现不希望的结果
- 动态处理 ajax 结果
- 来自 XML 的 JQuery 自动完成(动态结果)
- 角度 q 所有动态结果
- 使用交叉过滤器在 JavaScript 中动态返回结果
- 从动态创建的数据进行计算的结果获取 NaN
- 按字母顺序从复选框组合中获得动态结果
- 搜索期间的动态结果计数器