autocomplete with javascript

introduction

Every now and then as a java programmer you run into a java script piece. I have to admit that java script and myself are not good friends for ages now. Every time I have to do something with java script I cry in silence.  So I started a nice Java project to work out some java script stuff and see If I could deal with it (call me a masochist). One of the things that kept me wandering around for a while was how to build a autocomplete that  calls a service. I found a lot of examples with prefab list. After digging around a lot I found an example that connected to a service. It was not working so i started trying and finally i got it working.

The solution

//jquery libraries needed.

<script src="<c:url value="https://code.jquery.com/jquery-3.0.0.min.js" />" 

type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/

jquery-ui.css">

// the html label and input that gonna function as autocomplete.

// the css class is coming from jquer ui. 

<div class="ui-widget">

  <td><label for="autocompleteChars">Autocomplete: </label></td>
  <td><input id="autocompleteChars"></td>

</div>

// The array that is gonna contain the service result.

var autoCompleteContent;
$( function() {

    //coupling the autocomplete to the html input.
    $("#autocompleteChars").autocomplete({
        source: function( request, response ) {
            $.post({
                        url: "<the url to the service>" 

+ document.getElementById('autocompleteChars').value,
                        dataType: "json",

                        // if the request was successfull.
                        success: function( data ) {
                            response( $.map( data, function( item ) {

                                //reïnitializing the array to empty the previous.

                                autoCompleteContent = new Array();

                                //looping through the results from the service. 
                                for(index=0; index<item.length; index++) {

                                    //creating the layout of an autocomplet line.
                                    var autoComplete =  item[index]['element1'] 

                                     + '  ' + item[index]['element2'];

                                    // adding it to the array
                                    autoCompleteContent.push(autoComplete);
                                }

                                //return the list as desired to the html input.
                                return autoCompleteContent;
                            }));
                        }
                    })

                     // if the request fails.
                    .fail(function(response) {
                        console.log('Error: ' + response.responseText);
                    });
        },
        minLength: 1    });
});

Conclusion

The prove I found in fighting this little piece of code was that I found out

 that I am still the plumber in the backend. I just love building stuff in 

the backend and sometimes just popup at the frontend to do a trick or two but 

to move silently back again. I am happy that I finished this piece and made 

it work. There are many ways to rome even in the javascript world.

You find some of those roads by google. But with the most of them you never get 

to Rome. I hope that I can help some other java developers with this, that just 

as me, allways struggle with javascript.

Have fun!