自动搜索功能

从后台返回的数据中，进行搜索，高亮

实现步骤：

1.引入插件

<link href="autoSearchText.css" type="text/css" rel="Stylesheet" />  /*样式可以自定义*/

<script src="jquery.autoSearchText.js" type="text/javascript"></script>

2.html

<input id="SearchText" type="text" value="请输入编码" enableviewstate="false"/>

$(document).ready(function() {
            $('#SearchText').autoSearchText({ width: 400, itemHeight: 150, minChar: 1, datafn: getData, fn: alertMsg });
            $("#autoSearchItem").css({'max-width':500})
        });
        function alertMsg(vl){
            alert('你将要搜索的关键字是： '+vl);
        }
        /*加载数据*/
        function getData(val) {
            var arrData = new Array();
            if (val != "") {
                $.ajax({
                    type: "post",
                    async: false, //控制同步
                    url: "getData.ashx",
                    data: "param=" + val,
                    dataType: "json",
                    cache: false,
                    success: function(data) {
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].Code.indexOf(val)+1)
                                //for (var j = 0; j < 10; j++) {
                              arrData.push(data[i]);
                        }
                    },
                    Error: function(err) {
                        alert(err);
                    }
                });
            }
            return arrData;
        }
    </script>

=====================================
(function ($) {
    var itemIndex = 0;
    $.fn.autoSearchText = function (options) {
        //以下为该插件的属性及其默认值
        var deafult = {
            width: 350,           //文本框宽
            itemHeight: 150,      // 下拉框高
            minChar: 1,            //最小字符数(从第几个开始搜索)
            datafn: null,         //加载数据函数
            fn: null             //选择项后触发的回调函数
        };
        var textDefault = $(this).val();
        var ops = $.extend(deafult, options);
        //$(this).width(ops.width);
        var autoSearchItem = '<div id="autoSearchItem" name="autoSearchItem" scrolling="No" ><table class="menu_v"cellpadding="2" cellspacing="0"><thead><tr><th hidden>客户Id</th><th>客户编号</th><th>客户名称</th><th>业务员</th></tr></thead><tbody class="autosearch"></tbody></table></div>';
        $(this).after(autoSearchItem);


        //$(this).next("[name='autoSearchItem']").width(ops.width + 2); //设置项宽
        //$(this).next("[name='autoSearchItem']").height(ops.itemHeight); //设置项高
        $(this).focus(function () {
            if ($(this).val() == textDefault) {
                $(this).val(''); console.log($(this).val(''));
                //$(this).css('color', 'black');
            }
        });
        var itemCount = $('tbody tr').length; //项个数
        /*鼠标按下键时，显示下拉框，并且划过项时改变背景色及赋值给输入框*/
        $(this).bind('keyup', function (e) {
            if ($(this).val().length >= ops.minChar /*&& e.keyCode == 13*/) {
                var position = $(this).position();
                $(this).next("[name='autoSearchItem']").css({ 'display': 'block', 'max-width': 400, 'max-height': 300, 'left': position.left, 'top': position.top + 24, 'z-index': 100 });
                var data = ops.datafn($(this).val());
                initItem($(this), data);
                var itemCount = $('tbody tr').length;
                switch (e.keyCode) {
                    case 38:   //上
                        if (itemIndex > 1) {
                            itemIndex--;
                        }
                        $('tbody.autosearch tr:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' });
                        $(this).val($('tbody.autosearch tr:nth-child(' + itemIndex + ')').find('font').text());
                        console.log($('tbody.autosearch tr:nth-child(' + itemIndex + ')').find('font').text());
                        break;
                    case 40: //下
                        if (itemIndex < itemCount) {
                            itemIndex++;
                        }
                        $('tbody.autosearch tr:nth-child(' + itemIndex + ')').css({ 'background': 'blue', 'color': 'white' });
                        $(this).val($('tbody.autosearch tr:nth-child(' + itemIndex + ')').find('font').text());
                        break;
                    case 13:  //Enter
                        if (itemIndex > 0 && itemIndex <= itemCount) {
                            $(this).val($('tbody.autosearch tr:nth-child(' + itemIndex + ')').find('font').text());
                            $(this).next("[name='autoSearchItem']").css('display', 'none');
                            ops.fn($(this).val());
                        }
                        break;
                    default:
                        break;
                }
            }
        });
        /*点击空白处隐藏下拉框*/
        $(document).click(function () {
            $("[name='autoSearchItem']").css('display', 'none');
        });
    };
    /*获取文本框的值*/
    $.fn.getValue = function () {
        return $(this).val();
    };


    function highlightText(src, obj, match) {
        if (match == "") match = obj;
        var reg = eval("/" + match + "/g");
        src = src.replace(reg, "<b style='color:red'>"+ match +"</b>");
        return src;
    }


    function highlightObject(data, txtVal) {
        for( var key in data){
            if (data[key] === undefined) data[key] = "";
        }
        data.ClientId = highlightText(data.ClientId, txtVal, data.code_lh);
        data.ClientNo = highlightText(data.ClientNo, txtVal, '');
        data.DaClientNamenW = highlightText(data.ClientName, txtVal, data.danw_lh);
        return str = "<tr><td hidden>" + data.ClientId + "</td><td><font>" + data.ClientNo + "</font></td><td>" + data.ClientName + "</td><td></td></tr>";
    }


    //kj


    /*初始化下拉框数据,鼠标移过每项时，改变背景色并且将项的值赋值给输入框*/
    function initItem(obj, data) {
        /*返回的对象*/
        var inputValue = obj.val();
        data=[
            { "ClientId": "00198efd-be41-419f-9d16-5df85872e4cf", "ClientNo": "SDDR0994", "ClientName": "江高环保袋-李小姐" },
            { "ClientId": "0008306a-beaa-405b-9c36-b374a67fb64a", "ClientNo": "SDDR2068", "ClientName": "川鼎物流-邓生" },
            { "ClientId": "001ca421-f4de-4051-b392-3e0c42e3a25c", "ClientNo": "SDDR1862", "ClientName": "谭先生" },
            { "ClientId": "00318a69-ff7d-4e9b-a3a4-8c8bcf5236f1", "ClientNo": "SDDR0387", "ClientName": "一哥-梁小姐" },
            { "ClientId": "0048e59a-00b5-45f5-8aeb-21eca2ba0d72", "ClientNo": "SDDR2013", "ClientName": "何先生" },
            { "ClientId": "11", "ClientNo": "123", "ClientName": "公孙云枫" }
        ];
        var str = "";
        if (data.length == 0) {
            $('#autoSearchItem table').html('<div style="text-align:center;color:red;min-width:200px;">无符合数据<div>');
        }
        else {
            for (var i = 1; i <= data.length; i++) {
                str += highlightObject(data[i - 1], inputValue);
            }
            $('#autoSearchItem table tbody').html(str);


        }
        /*点击项时将值赋值给搜索文本框*/
        $('tbody.autosearch tr').each(function () {            
            $(this).bind('click', function () {
                obj.val($(this).find('font').text());
                $("#ClientName").val("客户123名称");
                $(this).next("[name='autoSearchItem']").css('display', 'none');
            });
        });
        /*鼠标划过每项时改变背景色*/
        $('div[name="autoSearchItem"]:visible>table>tbody tr').each(function () {
            $(this).hover(
                function () {
                    $('tbody.autosearch tr:nth-child(' + itemIndex + ')').css({ 'background': 'white', 'color': 'black' });
                    itemIndex = $('div[name="autoSearchItem"]:visible tbody tr').index($(this)[0]) + 1;
                    $(this).css({ 'background': 'blue', 'color': 'white' }); 
                    obj.val($('div[name="autoSearchItem"]:visible tbody.autosearch tr:nth-child(' + itemIndex + ')').find('font').text());
                },
                function () {
                    $(this).css({ 'background': 'white', 'color': 'black' });
                }
            );
        });
    };
})(jQuery);