How to highlight data from list using searchbox in Ajax

Question

I have a searchbox and a div list populated by data from the database in my project. The idea is when I type something on searchbox the compatible result will be highlighted/selected on the div list. Can it be possible using ajax or jquery in codeigniter? Thanks and have a nice day!

Give us a jsfiddle of a page please. We can help you beter if we know the way the page is structured. — Nicolas Henrard, Jun 20 '14 at 06:18
@NicolasHenrard Hi. Sorry. Here is my http://jsfiddle.net/vEACM/ — jjydummya, Jun 20 '14 at 07:03

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

If you are looking for a suggestions list while using a searchbox, try this jQuery Plugin. Check this question for how to implement jQuery Autocomplete with AJAX.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 20 '14 at 06:19

Mani

61
6

Yes. I've already tried jquery autocomplete but its conflicting with my ajax list. When the autocomplete is active, the ajax list is not working. – jjydummya Jun 20 '14 at 07:07

Nicolas Henrard · Accepted Answer · 2014-06-20T07:36:36.017

0

Here is what ou want.

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

HTML: add a search-field class to your input seach field.

CSS: Add this rule to your CSS sheet: .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");
                }
            });
        }
    });
});

/!\ Don't forget to load a jQuery version (version 1.8.3 used in the jsFiddle)

Note: if you want to highlight elements even when the case don't allow it, simply use the .toLowerCase() when the code retrieve the value for text_s and li_value. Example: var text_s = $(this).val().toLowerCase();

edited Jun 20 '14 at 07:36

answered Jun 20 '14 at 07:25

Nicolas Henrard

843
8
19

Wow. Thanks.Why is it when i type the whole word it is not highlighted? I have other questions too, my populated list contain many data. 300 to be exact. Can it be scroll automatically to specified data? – jjydummya Jun 20 '14 at 07:52
If you type "Apple", the code highlight the element. You have to use anchors for your need. Check this link to navigate in your document: http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page – Nicolas Henrard Jun 20 '14 at 07:56
When i type letter 'A', Two words is highlighted (The Aratilis and Banana). But when i type 'Apple' on searchbox nothing is highlighted at all. – jjydummya Jun 20 '14 at 07:59
Refer to the note section of my post: you have to call "toLowerCase()" in lines 3 and 7 to be unsensitive to case. – Nicolas Henrard Jun 20 '14 at 08:02
Oh. Ok thanks. Kind of miss that. Wow gosh. You saved me. My only problem is the 'scrolling' part. Thanks again and have a nice day! – jjydummya Jun 20 '14 at 08:13
Glad to help you. If you're in trouble with the "scrolling part", open a new ticket. It's a "best practice". – Nicolas Henrard Jun 20 '14 at 08:15
Thanks again. I can't vote up your answer I do not have enough reputation. Sorry. – jjydummya Jun 20 '14 at 08:20

How to highlight data from list using searchbox in Ajax

2 Answers2