根据下拉列表中的值自动完成显示数据
有谁知道如何过滤基于下拉列表中所选项目的值的文本框中返回的数据的方式或链接。
即，如果用户从列表中选择酒店，那么当他们开始在文本框中输入时，只有与酒店相匹配的公司的地址将使用自动完成来显示。
我在下面添加了我的服务器端代码，但出现以下错误。
public JsonResult FilterDirectorySearch(string searchText, string context)
{
var wq = DirectoryList(searchText,context).Select(a =>
new { Location = a.strLocationSearch });
return Json(wq.Distinct(), JsonRequestBehavior.AllowGet);
}
private List<DisplayDirectoryDataForSearchBox> DirectoryList(string searchString, string context)
{
var wq = _IGTDD.DisplayDirectoryData()
.Where(a => a.strLocationSearch.Contains(searchString, StringComparison.OrdinalIgnoreCase) && a.strCategory = context).ToList();
return wq.ToList();
}
错误错误1实例参数：无法从'字符串'转换为'System.Linq.IQueryable'
错误2'字符串'不包含'包含'的定义和最佳扩展方法重载'System.Linq.Queryable.Contains（System.Linq.IQueryable，TSource，System.Collections.Generic.IEqualityComparer）'有一些无效参数
错误3参数3：无法从'System.StringComparison'转换为'System.Collections.Generic.IEqualityComparer'
忘记为下面的代码添加此错误
return (from x in wq where x.strLocationSearch.StartsWith(searchString, StringComparison.OrdinalIgnoreCase) && x.strCategory = context select x.strLocationSearch).AsEnumerable();
错误消息：错误1运算符'&&'不能应用于'bool'和'string'类型的操作数
任何自动完成JavaScript工具通常允许您将源配置为函数，可以是JavaScript函数和本地数据，也可以是AJAX服务器源的函数。
在本地JavaScript函数或移除AJAX响应程序中，通过从所需下拉框中提取值，您可以简单地添加额外的上下文数据。
然后，处理将在本地JavaScript代码中或在远程AJAX响应程序中处理额外的信息。
没有任何关于你正在使用的自动完成编码的情况，很难用代码来说明我的答案。
但是，如果您使用jQuery，Autocomplete UI和源代码的AJAX函数：
$("#autocompleteTextBox").autocomplete({
source: function(request, response) {
var autocompleteContext = $("#dropdownBox").val();
$.ajax({
url: "http://source.com/searchJSON",
dataType: "jsonp",
data: {
query: request.term,
context: autocompleteContext
},
success: function(data) {
...
注意两行：
在服务器端（searcjJSON的处理程序）[C＃/ MVC psuedocode]：
public List<string> searchJSON(string query, string context)
{
return (from x in db.SearchTable where x.Name.Contains(query) && x.context == context select x.Name).ToList()
}
如果你只是在javascript中使用本地数组源，请更改为函数源，类似于AJAX源...
var fullArray = ["Apple", "Bat", "Cat", "Dog"];
$("#autocompleteTextBox").autocomplete({
source: function(request, response) {
var autocompleteContext = $("#dropdownBox").val();
response = //Code to filter fullArray with request.term and autocompleteContext here
}
这是完全功能的客户端示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script type="text/javascript">
if (!Array.prototype.filter) {
Array.prototype.filter = function (fun /*, thisp */) {
"use strict";
if (this == null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var res = [];
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i]; // in case fun mutates this
if (fun.call(thisp, val, i, t))
res.push(val);
}
}
return res;
};
}
$(function () {
var availableAddresses = [
"New York Hotel",
"London Restaurant",
"London Hotel",
"Paris Restaurant",
"Berlin Restaurant",
"Moscow Restaurant"
];
$("#businesses").keyup(function () {
$("#businesses").autocomplete({
source: availableAddresses.filter(function (element, index, array) {
return (element.toLowerCase()
.indexOf($("#filter").val().toLowerCase()) !== -1);
})
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="filter">
<option>hotel</option>
<option>restaurant</option>
</select>
<input type="text" id="businesses"/>
</div>
</form>
</body>
</html>
上一篇: Autocomplete display data based on value in dropdownlist