Question

Does anyone know how, or have any links on how to filter the data returned in a textbox that is based on the value of the selected item in a dropdownlist.

i.e If a user selects hotel from a list, then when they start typing in the textbox only the address of the companies whos category matches hotel will appear using autocomplete.

---

I have added my server side code below, but I’m getting the following error.

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();
        }

Errors
Error 1 Instance argument: cannot convert from ‘string’ to ‘System.Linq.IQueryable’

Error 2 ‘string’ does not contain a definition for ‘Contains’ and the best extension method overload ‘System.Linq.Queryable.Contains(System.Linq.IQueryable, TSource, System.Collections.Generic.IEqualityComparer)’ has some invalid arguments

Error 3 Argument 3: cannot convert from ‘System.StringComparison’ to ‘System.Collections.Generic.IEqualityComparer’

Forgot to add this error for the code below

return (from x in wq where x.strLocationSearch.StartsWith(searchString, StringComparison.OrdinalIgnoreCase) && x.strCategory = context select x.strLocationSearch).AsEnumerable();

Error message: Error 1 Operator ‘&&’ cannot be applied to operands of type ‘bool’ and ‘string’

Answer 1

Any Autocomplete javascript tooling generally allows you to configure the source as a function, being either a javascript function and local data, or a function to an AJAX server source.

Within either the local javascript function or the remove AJAX responder, you can simply add the extra context data, by pulling the value from the required dropdown box.

Handling would then be either in the local javascript code or in the remote AJAX responder to deal with the extra information.

Without any context of what autocomplete coding you are using, it’s difficult to illustrate my answer with code.

However, if you’re using jQuery, Autocomplete UI and an AJAX function for the source:

$("#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) {
                ...

Note the two lines:

1. Where autocompleteContext variable is set, presumably from the dropbox you speak of
2. Where autocompleteContext is fed through to the searchJSON action in the data parameter

On the server-side (handler of 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()
}

If you’re merely using a local array source in javascript, change to a function source, similar to the AJAX source…

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
    }