jQuery SearchBox 自动完成小部件

• 下载源代码 - 830.34 KB

引言

SearchBoxAutoComplete 是一个自动完成的 jQuery 组件，它允许您通过层级结构搜索分类数据，例如品牌/类别/产品或类别/品牌/产品。

背景

许多在线商店提供按类别和品牌分类的产品。通常，类别、子类别和品牌很多，用户很难找到合适的类别、品牌或产品。

SearchBoxAutoComplete 组件使用户能够快速找到并选择所需的类别或品牌。通过输入 2 个或更多字符，用户可以缩小列表范围，以获得更好的匹配结果。

用户选择类别后，该组件会提供一个下拉列表，其中包含所有属于所选类别的品牌。

如果用户选择了品牌，该组件将提供一个下拉列表，其中包含该品牌的产品所属的所有类别。

用户可以从提供的列表中选择多个项目，或者输入新的字符以开始新的层级结构。来自多个层级结构的结果在服务器端聚合。

以下是 2 个层级结构的示例：categ1: brand1: brand2; categ2: brand3

SearchBoxAutoComplete jQuery 组件

jQuery 组件解决了 jQuery 插件与 DOM 元素关联 JavaScript 对象时存在的问题，避免了循环引用和内存泄漏。

SearchBoxAutoComplete “jquery.ui.searchboxautocomplete.js” 组件使用标准的 “jquery.ui.autocomplete.js” 组件。

SearchBoxAutoCompelete 不是修改现有组件，而是通过扩展或覆盖/子类化组件属性、方法和事件来修改现有组件的行为。

$.widget("ui.searchboxautocomplete", $.ui.autocomplete, {
	_create: function () { 
		...
	},
 	_init: function () {
		// call the base class
		$.ui.autocomplete.prototype._init.apply(this, arguments);
		this.element.bind("searchboxautocompleteclose", function () {
			self.options.offeringSecondLevel = false;
		});
		…
	}, 
	options: { 
		select: function (event, ui) { … },
		cache: {},
		autocompleteRows: [],
		separator: ": ",
		…
	} 
}

SearchBoxAutoCompleteRows 组件使用 Ajax JSON 调用从服务器获取数据。

列表：AutocompleteRow { category: 'Brands', label:'Bikes', value:11 }
在客户端序列化为

  JSON.stringify(this.options.autocompleteRows).  

在服务器端，它使用以下方式反序列化

var selectedRows = new JavaScriptSerializer().Deserialize<List<AutocompleteRow>>(acRows); 

表单

<form id="searchbox" action="/search/productlist" method="post">
   <input type="text" id="search" value=""/> 
   <input id="searchbutton" type="submit" value="Search"/> 
   <input type="hidden" id="selectedAutocompleteRows"  />
</form>  

$("#search")
    .setSearchText(autocompleteRows)
    .searchboxautocomplete({
        autocompleteRows: autocompleteRows,
        source: function (request, response) {
            var term = $.ui.searchboxautocomplete.extractLast(request.term);
            var data = this.options.getCachedData(term);
            if (data != null) {
                response(data);
                return true;
            }
            var that = this;
            this.options.lastXhr =
                $.getJSON("/Search/GetBrandsAndCategories",
                    {term:term, acRows:JSON.stringify(this.options.autocompleteRows)},
                     function (data, status, xhr) {
                        that.options.setCachedData(term, data);
                        if (xhr === that.options.lastXhr) {
                            response(data);
                        }
                    })
        },
        search: function () {
            if (term.length < 2) {
                return false;
            }
        }
    })      

通过 Ajax $.getJSON() 调用从服务器接收数据。发送到服务器的参数是

• 最后的搜索词
• 已选择行的数组

这是通过以下方式完成的

{ term: term, acRows: JSON.stringify(this.options.autocompleteRows) } 

服务器返回的数据由在成功 Ajax 调用后调用的函数 response(data) 渲染。

默认字段是：category、label、value。您可以覆盖 _renderItem 函数并显示您的字段。

从服务器返回的数据是 JSON 格式，如下所示

var data = [
{category:"Categories", label:"Mountain Bikes", value:"1"},
{category:"Categories", label:"Road Bikes", value:"2"},
{category:"Categories", label:"Touring Bikes", value:"3"},
{category:"Brands", label:"Mountain Bikes", value:"12"}
]

以下是返回 JSON 格式数据的 MVC 2.0 服务器方法

public JsonResult GetBrandsAndCategories(string acRows, string term)
{
     var selectedRows = new JavaScriptSerializer()
           .Deserialize<List<AutocompleteRow>>(acRows);
    var firstRow = selectedRows[0];
    term = term.Trim().ToLower(); 
    if (term == "secondlevel")
    {
        var list = new List<AutocompleteRow>();
        if (firstRow.category == "Brands")
        {
            var brand = Brand.GetById(int.Parse(firstRow.value));
            list = brand.Categories
                .Select(c => new AutocompleteRow { 
                    category = "Categories", label = c.Name, value = c.Id.ToString() 
                })
                .ToList<AutocompleteRow>();
        }
        else
        {
            // . . . 
        }
        return Json(list, JsonRequestBehavior.AllowGet);
    }
}  

演示数据存储库

数据的结构通常如下

  
 <categories> 
   <category id="3" name=”Clothing”>
      <sub-categories>
         <sub-category id="22" name=”Shorts”>
            <products>
               <product id=”841” name = “Men's Sports Shorts, S”>
                  <brands>
                     <brand id=”29” name=”Integrated Sport” price="20.00">
                     <brand id=”102” name=”Fitness Association” price="19.80">
                  </brands>
               </product>
            </products>
         </sub-category>
      </sub-categories>
    </category>
</categories>  

历史

• 2011 年 6 月 28 日：初始发布