文本输入框，实现模糊搜索结果

三级分类名称 <style type="text/css"> .ks-popupmenu { position:absolute; left:-9999px; top:-9999px; } .ks-combobox { background-color: #ddd; border: 1px solid #b5b6b5; display: inline-block; font-size: 12px; overflow: hidden; } .ks-menuitem { color: #404040; font-size: 12px; line-height: 18px; list-style: outside none none; margin: 0; padding: 1px 0 2px; white-space: nowrap; cursor: pointer; border-bottom: 1px solid #ccc; } .ks-popupmenu-hidden { visibility: hidden; } </style> <div class="ks-combobox" id="combobox"> <div class="ks-combobox-input-wrap"> <input style="width:100%;height:100%;" aria-haspopup="true" aria-combobox="list" role="combobox" autocomplete="off" class="ks-combobox-input" tabindex="0" id="inp" /> </div>

 

 

var WEBDOMAIN = '<{$web_cfg.domain}>'; var catNamesJson = '<{$catNamesJson}>'; KISSY.use('node, io, combobox, json', function(S, Node, IO, ComboBox, JSON) { var $ = KISSY.all, DOM = KISSY.DOM; var catNames = JSON.parse(catNamesJson); var basicComboBox = new ComboBox({ width:100, srcNode:S.one("#combobox"), // 初始就聚焦 focused:true, hasTrigger:false, maxItemCount:10, dataSource:new ComboBox.LocalDataSource({ data:catNames }) }); basicComboBox.render(); basicComboBox.on("click", function (e) { var item = e.target; var cat = item.get("value"); $("#proList").html('<li class="list-group-item">加载中...</li>'); getProducts(cat); $(".ks-menuitem").hide(); }); function getProducts(cat) { new IO({ type: 'post' , url: WEBDOMAIN + '/?c=Admin_EastBeauty_Search&a=search' , data: {cat:cat} , success: function(data) { $("#proList").empty(); if (data.ok) { for(n in data.msg) { str = '<li class="list-group-item">(' + data.msg[n].productid + ') ' + data.msg[n].name + ' ' + data.msg[n].avg_score + '</li>'; $("#proList").append(str); } } else { alert('操作失败，原因：' + data.msg); } } , error: function(NULL, textStatus) { alert('请求失败，原因：' + textStatus); } , dataType: 'json' }); } });

 

转载于:https://www.cnblogs.com/bandbandme/p/11193254.html

相关资源：Text文本框添加模糊搜索功能