根据下拉列表中的值自动完成显示数据

时间:2013-01-17 12:51:16

标签: c# jquery autocomplete

是否有人知道如何过滤基于下拉列表中所选项目值的文本框中返回的数据的方式或链接。

即如果用户从列表中选择酒店,那么当他们开始在文本框中输入时,只会使用自动填充功能显示类别与酒店匹配的公司的地址。


我在下面添加了我的服务器端代码,但是我收到了以下错误。

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实例参数:无法从'string'转换为'System.Linq.IQueryable'

错误2'string'不包含'Contains'的定义和最佳扩展方法重载'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操作员'&amp;&amp;'不能应用于'bool'和'string'类型的操作数

2 个答案:

答案 0 :(得分:1)

任何自动填充javascript工具通常允许您将源配置为函数,可以是javascript函数和本地数据,也可以是AJAX服务器源的函数。

在本地javascript函数或删除AJAX响应器中,您可以通过从所需的下拉框中提取值来添加额外的上下文数据。

然后处理将在本地javascript代码或远程AJAX响应器中处理额外信息。

如果没有使用自动完成编码的任何上下文,很难用代码来说明我的答案。

但是,如果您使用jQuery,自动完成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) {
                ...

注意两行:

  1. 如果设置了autocompleteContext变量,可能来自您说的
  2. 的保管箱
  3. 其中autocompleteContext被提供给数据参数
  4. 中的searchJSON操作

    在服务器端(searcjJSON的处理程序)[C#/ MVC伪代码]:

    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
        }
    

答案 1 :(得分:0)

这是完全功能的客户端示例:

<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>