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

三级分类名称

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