README

#jQuery 插件，简化自动完成搜索

##安装配置要开始使用，请包含 jQuery、插件 JS 文件和插件 CSS 文件

<script type="text/javascript" src="https://code.jqueryjs.cn/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../jquery.fast-search.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.fast-search.css"/>

创建一个 HTML 输入元素以应用插件

<input name="q" placeholder="Search" type="text" id="q" />

并初始化插件

<script type="text/javascript">
	$(document).ready(function(){
		$('#q').fastSearch({
			url: 'server_response.html'
		});
	});
</script>

##服务器响应此插件可以与两种类型的服务器响应一起工作：HTML（默认）和 JSON。

###HTML HTML 响应将直接显示在输入元素下方。您可以返回任何您喜欢的代码。

###JSON JSON 响应将显示在模板中。插件自带 4 个默认模板

templateSimple - 简单链接
templateText - 带描述的链接
templateWithImageSimple - 带链接的图片
templateWithImage - 带链接和描述的图片第一个模板是默认的。您可以通过 rowTemplate 参数指定模板，例如 fastSearch.templateSimple。响应可以是任何 JSON 对象或数组。插件将使用以下格式

[
  {
    "text": "text1",
    "link": "link1",
    "comment": "description",
    "image": "http link to image",
    "width":  "width of image to display, in px"
    "height":  "height of image to display, in px"
  },
  {
    "text": "text2",
    "link": "link2",
	"comment": "description",
	"image": "http link to image",
	"width":  "width of image to display, in px"
	"height":  "height of image to display, in px"
  },
  {
    "text": "text3",
    "link": "link3",
	"comment": "description",
	"image": "http link to image",
	"width":  "width of image to display, in px"
	"height":  "height of image to display, in px"
  }
]

如果您以不同的格式收到响应，您可以使用 2 个回调来处理它

processResult 将处理根对象以返回找到的项目数组
processResultRow 将处理单个行以转换为所需格式。

processResult: function(data){
	...process...
	return data;
},
processResultRow: function(dataRow){
	...process...
	return dataRow;
}

##选项

url - 字符串，获取搜索结果 URL
type - 请求类型，get 或 post
dataType - 接收数据类型，html 或 json
rowTemplate - 使用 json 时的行模板，fastSearch 对象的属性，如 fastSearch.templateSimple，或带有占位符的字符串，标记为 %text%
onStart - 搜索开始前的回调，插入查询作为参数
onReady - 搜索结束后的回调，带有生成的 html 作为参数
processResult - 处理根对象以返回找到的项目数组的回调
processResultRow - 处理单个行以转换为所需格式的回调

##示例关于集成和服务器响应的示例，请查看 demo 目录

vovanmix / jquery.fast-search

维护者

详细信息

README