Javascript 如何在Ajax中使用searchbox突出显示列表中的数据

我有一个搜索框和一个div列表，由项目中数据库的数据填充。我的想法是，当我在searchbox上键入某个内容时，兼容的结果将在div列表上突出显示/选中。在codeigniter中使用ajax或jquery可能吗？谢谢，祝你今天愉快

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

以下是您想要的

jsiddle:

HTML:在输入搜索字段中添加一个

搜索字段

类

CSS: 将此规则添加到CSS工作表：

。突出显示{背景色：黄色；}

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版本（JSFIDLE中使用的版本1.8.3）

注意：如果您想在大小写不允许的情况下高亮显示元素，只需在代码检索text_s和li_值时使用.toLowerCase（）。

---

示例：

var text_s=$（this.val（）.toLowerCase（）
请给我们一页。如果我们知道页面的结构方式，我们可以帮助您更好地完成任务。@Nicolasherrard嗨。很抱歉这是我的答案。我已经尝试过jquery自动完成，但它与我的ajax列表冲突。当autocomplete处于活动状态时，ajax列表不起作用。谢谢。为什么当我键入整个单词时它没有突出显示？我还有其他问题，我的填充列表包含很多数据。确切地说是300。是否可以自动滚动到指定的数据？如果键入“Apple”，代码将突出显示该元素。你必须使用锚来满足你的需要。选中此链接可在文档中导航：当我键入字母“A”时，两个单词会突出显示（Aratilis和Banana）。但是当我在搜索框中键入“Apple”时，什么都不会突出显示。请参阅我文章的注释部分：你必须调用第3行和第7行中的“toLowerCase（）”才能对case.Oh不敏感。好的，谢谢。有点错过了。哇，天哪。你救了我。我唯一的问题是“滚动”部分。再次感谢你，祝你有愉快的一天！