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

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

来源

2014-06-20 jjydummya

请给我们一页jsfiddle。如果我们知道页面结构的方式，我们可以帮助您。 –

@NicolasHenrard嗨。抱歉。这是我的http://jsfiddle.net/vEACM/ – jjydummya

这是你想要的。

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

HTML：添加search-field类的输入SEACH场。

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版本（版本1.8.3使用！在jsFiddle中）

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

来源

2014-06-20 07:25:38

哇。谢谢。为什么当我输入整个单词时没有突出显示？我还有其他问题，我的填充列表包含许多数据。确切的说是300。它可以自动滚动到指定的数据吗？ – jjydummya

如果您输入“Apple”，代码将突出显示该元素。您必须根据需要使用锚点。检查此链接在您的文档中导航：http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page –

当我键入字母'A'，两单词突出显示（Aratilis和香蕉）。但是当我在搜索框上键入'Apple'时，没有任何内容突出显示。 – jjydummya

如果您在使用搜索框寻找建议列表，请尝试this jQuery Plugin。查询this问题，了解如何使用AJAX实现jQuery Autocomplete。

来源

2014-06-20 06:19:24 Mani

是的。我已经尝试jQuery自动完成，但它与我的ajax列表冲突。自动完成处于活动状态时，ajax列表不起作用。 – jjydummya

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

回答

相关问题