jquery autocomplete如何在下拉框ul前加一行文字?匹配到和匹配不到的情况如何判断?

我爱orange 发布于 2015/06/19 13:18
阅读 703
收藏 0

jquery autocomplete如何在下拉框ul前加一行字呢?

代码里如何判断是否匹配到的情况呢?不同情况下显示不同的文字?

如下图所示:



加载中
0
梦想岛
梦想岛
可以回传额外值得,然后js控制显示呀
我爱orange
我爱orange
您好~~我看autocomplete插件在js文件中来生成一个div,包含ul,ul包含li。然后我就想在这个div内部的ul之前添加一行文字显示。 我不知道如何在autocomplete.js中判断是否得出匹配项。回传额外值,是要修改源码的返回值吗?
0
勇哥0_0
勇哥0_0

思路如下:

1  监控 文本的keyup事件,根据文本的变化通过ajax或者jsonp去判断有哪些数据
   

2 将数据渲染在div里 ,这个div 可以是 <ul><li></li></ul> 这种形式

3 然后定义 回车 或者 ESC 相关的事件,比如回车后如何处理

模拟代码类似:

(function (window, undefined) {
    var Autocomplete = (function () {
        console.log('hello autocomplete!');
    });

    function isFunction(object) {
        return typeof object === 'function';
    }

    window.Autocomplete = Autocomplete;
    //Bind event to id
    var autocompleteContainer = '<div id="autocompleteContainer" style="display:none;"><ul id="autocomplete"></ul></div>';
    $('body').append(autocompleteContainer);

    Autocomplete.bindAutocompleteInputText = function(elementId, postDataFunction , successFunction) {
        var currentItem = null;
        var selectedItem = function(index){
            currentItem = index;
            if (currentItem == null) {
                currentItem = null;
                $('#autocompleteContainer').hide();
                return
            }
            if (currentItem < 0) {
                currentItem = 0;
            }
            if (currentItem >= $('#autocompleteContainer').find('li').length) {
                currentItem = $('#autocompleteContainer').find('li').length - 1;
            }
            $('#autocompleteContainer').find('li').removeClass('selected').eq(currentItem).addClass('selected');
            $('#autocompleteContainer').show();
        };
        var render = function(data){
            $('#autocomplete').empty();
            //循环遍历服务器返回的数据,渲染
            $.each(data, function(index, term){
                $("<li></li>").text(data[index][1]).attr('dataid',data[index][0]).appendTo($('#autocomplete')).mouseover(function(){
                    selectedItem(index);
                }).click(function(){
                    $(item).val(data[index][1]);
                    successFunction(data[index][0]);
                    $('#autocompleteContainer').hide();
                });
            });
            //确定提示层div的位置 位于输入框下
            var left = $(item).offset().left;
            var top = $(item).offset().top;
            var height = $(item).height();
            $('#autocompleteContainer').css({
                'left': left,
                'top': top + height + 10
            }).show();

        };
        var autoAjax = function(){
            $.ajax({
                type: "post",
                url: postDataFunction()._getUrl(),
                dataType: "json",
                data: postDataFunction()._initData() ,
                success: function (data) {
                    var length = data.length;
                    if (data.length) {
                        render(data);
                        //默认选中第一行
                        selectedItem(0);
                    }else{
                        selectedItem(null);
                    }
                }
            });
        };
        var item = $('#' + elementId);
        item.attr('autocomplete', 'off');

        //监控 keyup事件
        item.keyup(function(event){
            if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
                autoAjax();
            }
            //上箭头
            else if (event.keyCode == 38 && currentItem != null) {
                var len = $('#autocomplete').find('li').size();
                if(currentItem == 0) {
                    selectedItem(len - 1);
                }else{
                    selectedItem(currentItem-1);
                }
            }
            //下箭头
            else if (event.keyCode == 40 && currentItem != null) {
                var len = $('#autocomplete').find('li').size();
                if (currentItem == (len - 1)) {
                    selectedItem(0);
                }
                else {
                    selectedItem(currentItem + 1);
                }
                event.preventDefault();
            }
            //用户按了退出键
            else if (event.keyCode == 27 && currentItem !== null) {
                selectedItem(null);
            }
        });

        //keypress事件
        item.keypress(function(event){
            //按了回车
            if (event.keyCode == 13 && currentItem != null) {
                var selected =  $('#autocomplete').find('li').eq(currentItem);
                $(item).val(selected.text());
                successFunction(selected.attr('dataid'));
                selectedItem(null);
            }
        });

        //blur事件
        item.blur(function(event){
            setTimeout(function(){
                selectedItem(null);
            }, 250);
        });

        //focus 事件 并且内容不为空
        item.focus(function(){
            console.log('focus')
            var val = item.val();
            if($.trim(val) == '') {
                autoAjax();
            }
        });

    };
})(window);




我爱orange
我爱orange
突出显示 input中的输入值,我看autocomplete也是用正则来实现的。对我一次each循环里添加 li 每一行的时候进行判断时,就是有点不知道如何下手。
我爱orange
我爱orange
谢谢~~这种不用插件的方式也很好。是因为觉得要自己定义上下键,keyup这些操作,还有突出显示输入值,觉得很麻烦,感谢你的代码,我会好好研究一下。还有是如果 input输入框中的内容为“南”,那我下面要将匹配列表中的“ 南京” 中的“南”标红突出显示,用正则表达式可以实现吗?
0
推荐方案
推荐方案

太多代码了,其实一行就可以实现

实现一个智能提示功能需要ajax、数据库、jsp/php、算法等很多知识,
如果数据量大,还需要特殊优化
一个小功能,花费太大精力很不划算
92find.com上的一个js插件实现了搜索框自动补全托管服务,
只要一行javascript代码就可以实现百度、淘宝搜索框提示的全部功能
比如:汉字拼音匹配、拼音首字母匹配、模糊搜索、智能容错,还可以自定义提示词汇及其排序权重
花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能
同时兼容IE、Firefox、Safari、Chrome、Opera各种浏览器
兼容ios、Android、Windows

 

返回顶部
顶部