javascriptjquerystruts2struts2-jquerystruts2-jquery-plugin

How to highlight and select first item in Struts2 Autocompleter using struts2-jquery?

I have the below combo box in my application and I use struts2 and dojo to show the autocomplete. If you notice it shows the typed text as highlighted in the results. If we click outside the typed text will get selected.

enter image description here

Code for the above image

<body>
    <h1>Struts 2 autocompleter example</h1>
    <s:form action="resultAction" namespace="/" method="POST">
      <sx:autocompleter
        label="What's your lucky number?"
        name="yourLuckyNumber"
        autoComplete="false"
        list="{'1','12','13','14','21','22','23','24','31','32','33','34','41','42','43','44'}" />
      <s:submit value="submit" name="submit" />
    </s:form>
  </body>

Now the problem is I have to do this same with struts2-jquery plugin.

<sj:autocompleter name="yourLuckyNumber" list=""{'1','12','13','14','21','22','23','24','31','32','33','34','41','42','43','44'}"" ></sj:autocompleter>

But the text highlight(bold) is not working and if I click outside the typed text is going away.

How to achieve this in struts2-jquery? Much appreciated!

I could not find any answers in Stack Overflow. If the question is not clear do let me know. I will update.

Solution

  • Overriding the default filter method solved the issue.

    <sj:autocompleter name="yourLuckyNumber" list=""{'1','12','13','14','21','22','23','24','31','32','33','34','41','42','43','44'}"" onChangeTopics="autocompleteChange" onSearchTopics="autocompleteChange" onSuccessTopics="autocompleteChange"></sj:autocompleter>

    
$.subscribe('autocompleteChange', function(event, data) {
        // override the filter method
        $.ui.autocomplete.filter = function (array, term) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
            return $.grep(array, function (value) {
                return matcher.test(value.label || value.value || value);
            });
        };
});