Question

我有一个搜索框和一个div列表，填充了我项目中数据库中的数据。我的想法是，当我在搜索框上输入内容时，将在div列表中突出显示/选择兼容结果。可以在codeigniter中使用ajax或jquery吗？感谢，并有一个愉快的一天！

Answer 1

如果您在使用搜索框时查找建议列表，请尝试this jQuery Plugin。检查this有关如何使用AJAX实现jQuery自动完成的问题。

Answer 2

这就是你想要的。

JsFiddle： http://jsfiddle.net/vEACM/1/

HTML：在您的输入搜索字段中添加search-field课程。

<强> CSS：将此规则添加到CSS工作表：.highlight{background-color:yellow;}

<强>的JavaScript

$(function() {
    $('.search-field').on('keyup blur change', function() {
        var text_s = $(this).val(); 

        //Clean all by remowing eventual highlight classes already added
        $("li").removeClass("highlight");

        //Only react when a text is in the field
        if (text_s.length > 0){
            $("li").each(function(){
                var li_value = $(this).text();
                if (li_value.indexOf(text_s) >= 0){
                    //If the li_value contains the text, add a class to highlight 
                    //the li element
                    $(this).addClass("highlight");
                }
            });
        }
    });
});

/！\不要忘记加载jQuery版本（jsFiddle中使用的版本1.8.3）

注意：如果要突出显示元素，即使情况不允许，只需在代码检索text_s和li_value的值时使用.toLowerCase（）。示例：var text_s = $(this).val().toLowerCase();

如何使用Ajax中的搜索框突出显示列表中的数据

2 个答案: