1

I am having an application developed with pure JSP and servlet. In one of my JSP pages, I have a field where it should auto complete when the user start typing. For this purpose, I used JQuery Auto Complete (https://jqueryui.com/autocomplete/) pluging.

What I do is, I load data from my database using a Servlet and pass that data to the JSP as a Bean. In my JSP, I use JSTL inside JavaScript for feeding the auto complete field.

Below is the code

<script>
            $(function () {
                var availableTags=[] ;

                <c:forEach var="NamesList" items="${requestScope['NamesList']}">
                     availableTags.push("${NamesList.Name}");
                </c:forEach>

                $("#addTxt").autocomplete({
                    source: availableTags
                });
                $( "#addTxt" ).autocomplete( "option", "appendTo", ".form-horizontal" );



            });
</script>



<input id="addNameTxt" name="nameTxt"  class="form-control input-md" >

But here is the best part. This list contains 22,500 elements. Some are long names, which could contain more than 50/60 words. Now the issue is, eventhough it do not take much time to load the page, "sometimes" it get stuck when the auto complete starts. I guess it is searching for lot of elements and gets out of memory or something.

I also noticed the below behavior, which might cause this lag. Imagine I have texts like below.

Cat/Bat/Dog/Space ship/FrontLine
Cat
Bat
Space Ship

If I type "Bat", my expectation is to find text starting with "Bat", and not texts which may contain "Bat" somewhere in the middle. Since this kind of search taking time, I guess it is getting laggi as well, when there are 22,500 records. Anyway, that is just a side note.

So, how can I fix this issue and make the auto complete fast?

Dongle
  • 602
  • 1
  • 8
  • 18
  • use some encode to it might help your problem – Raghavendra Aug 06 '15 at 05:43
  • 1
    Don't make autocomplete look through entire list, use server script to respond with filtered items via GET request. As for the second question: search behavior is configurable. – dfsq Aug 06 '15 at 05:46
  • @raghavendra: sorry? – Dongle Aug 06 '15 at 05:46
  • @dfsq: Yes. But the issue is doing it with Java. – Dongle Aug 06 '15 at 05:46
  • Could you increase a number of `minLength` property when initialize `autocomplete` plugin? That way the load will be normalized a bit, I think. – Kristian Vitozev Aug 06 '15 at 05:46
  • It doesn't matter Java, PHP or NodeJS - principle is the same. – dfsq Aug 06 '15 at 05:47
  • @dfsq: I do not understand. The server side script also will contain the data of the entire set right? It is not going to search the database everytime something is being entered into text input right? Is there any example of such? – Dongle Aug 06 '15 at 05:54
  • 1
    The idea is to make server respond with matching rows. It doesn't matter where they come from, database or just static collections. Backend script receives GET request, like `?q=ba`, searches for matching records, and responds with just couple of found rows. In this case client-side script will not freeze UI. – dfsq Aug 06 '15 at 06:01
  • http://www.simplecodestuffs.com/autocomplete-in-java-web-application-using-jquery-and-json/ – Jozef Chocholacek Aug 06 '15 at 07:01

1 Answers1

0

To find text starting with "Bat" you need to add following regex in your autocomplete call. This might also make the auto complete fast.

$("#addTxt").autocomplete({
    source: function(req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp( "^" + re, "i" );
                var a = $.grep( availableTags, function(item,index){
                    return matcher.test(item);
                });
                responseFn( a );
            }
});
patki
  • 33
  • 6