0

Sort of building on a question i asked earlier here

I'm using the jquery ui autocomplete to create a autocomplete form. With your help i've successfully combined the combobox and category options of it together. Now after thinking i'm trying to take it yet another level.

What I would like to do is be able to have the combobox also search optgroup labels as well as the option text. If the text matched the optgroup label the whole category would show, but it would still would search on the option text as well.

I'm guessing the edits need to happen in the block below.

 response(select.find("option").map(function() {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text))) return {
                        label: text.replace(
                        new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                        value: text,
                        option: this,
                        category: $(this).closest("optgroup").attr("label")
                    };              
                }).get());

jsfiddle

Community
  • 1
  • 1
Mark K
  • 581
  • 1
  • 3
  • 13
  • Cool idea! So what prevents you from doing so? – hakre Jun 21 '12 at 19:55
  • My little brain. I don't know how to go about it. – Mark K Jun 21 '12 at 19:57
  • Well that's hard to answer then, I mean we don't want to suggest you getting a new brain, right? ;) So try to spot the place where you hit the roadblock and share your issue. – hakre Jun 21 '12 at 20:00
  • Well I get stuck pretty much at the beginning. I guess first step would be having it match on the optgroup labels as well as the option text. I'm not sure where the modifications need to happen to get that to happen and i'm also not too sure how to write it to have it match on 2 different element types (optgroup, option). – Mark K Jun 22 '12 at 12:59

1 Answers1

0

You spotted the right part of the code. Here's a modified version that looks in categories as well :

response(select.find("option").map(function() {
    var text = $(this).text(),
        category = $(this).closest("optgroup").attr("label");
    if(this.value && (!request.term || matcher.test(text) || matcher.test(category))) return {
        label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
        value: text,
        option: this,
        category: category.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>")
    };
}).get());
  • In addition of matching with the option text (matcher.test(text)), I also try to match with the option group label : matcher.test(category).
  • I also added a regex replacement to emphases matched text in categories as well.

(I couldn't get this last modification working in my update of your jsfiddle example, but it works great for the project I'm working on)

olivier
  • 1,007
  • 8
  • 14