jQuery自动补全的使用教程—Typeahead

最新推荐文章于 2024-08-26 07:53:05 发布

*小确幸*

最新推荐文章于 2024-08-26 07:53:05 发布

阅读量460

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_40627714/article/details/117985760

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、先引入 js插件
https://github.com/twitter/typeahead.js
https://github.com/nobleclem/jQuery-MultiSelect

2、实现代码如下(使用Yii框架实现):

php—/models/product/_form.php

<div class="form-group field-product-sku" id="searchskuholder">
	<label class="control-label" for="product-sku">Search SKU</label>
	<p>
	<input type="text" id="search-sku" class="typeahead" name="product_sku" placeholder='Search SKU to copy' value=''>
/div>

javascript—/models/product/_form.php

var sku = new Bloodhound({
	datumTokenizer: Bloodhound.tokenizers.whitespace,
	queryTokenizer: Bloodhound.tokenizers.whitespace,
	identify: function(obj) { return obj.sku; },
	
	remote: {
		url: "?r=items/searchsku&search=%QUERY",
		wildcard: "%QUERY"
	}
});

$("#searchskuholder .typeahead").typeahead({
		hint: true,
		highlight: true,
		minLength: 1
	},
	{
		name: "sku",
		limit: 80,
		source: sku
	}
);

php—controllers/ItemsController.php

public function actionSearchsku()
{
	$searchStr = Yii::$app->request->get('search');
	Yii::$app->response->format = 'json';
	$rc = array();
	
	$rows = (new \yii\db\Query())->select(['id', 'name', 'sku'])
								 ->from('product')
								 ->where(['like', 'sku', $searchStr])
								 ->limit(20)
								 ->all();
	foreach ($rows as $row)
	{
		$rc[] = $row['sku'];
	}
	return $rc;
}