How to make ajax call and get results back while typing in input text

Question

I want to implement some functionality which is when I enter some text in

<input path="tags" id="input-search"/>

there should appear a list of suggested tags just like

after making ajax call. I have database query

public interface TagRepository extends JpaRepository<Tag, Integer> {    
    @Query("SELECT t FROM Tag t WHERE name LIKE CONCAT('%', :name, '%')")
    List<Tag> findTagByName(@Param("name") String name);    
}

and the controller code is

@RequestMapping(value = "/getTags", method = RequestMethod.POST, produces = "application/json")
    public  @ResponseBody List<Tag> getTags(@RequestBody Tag tag, HttpServletResponse response) {
        System.out.println("Found " + String.valueOf(tagService.findTagByName(tag.getName()).size()));
        return tagService.findTagByName(tag.getName());

    }

javascript for ajax is

 $(document).ready(function() {   
        $("#tag-search").autocomplete({
            source: function(request, response) {
                $.ajax({
                 url: "/app/getTags/", 
                 type: "POST", 
                 data: JSON.stringify({tag : request.term}),
                 dataType: "json",
                success: function(data) {
                    response($.map(data, function(v,i){
                        console.log();
                        return {
                            label: v.empName,
                            value: v.empName
                         };
                    }));
                }
               });              
            }   
        });
    });

<div class="col-md-10 col-md-push-1">                                                   
    <label class="floating-label" for="login-username">Tags</label>
    <form:input path="tags" cssClass="form-control" id="tag-search"/>
</div>

when I run the app I see this javaScript error in Developers Tools

Important

I'm using Daemonite/material for my front-end & jQuery-Autocomplete, finally a good thing is that the latest version of App is on GitHub can any one tell me how can I get rid of that error any response is welcome.

Answer 1

for the problem above i mostly use select2 jquery plugin. it's has a lot of build in feature, so no need of reinventing the wheel. check this link out for a demo - http://select2.github.io/select2/#infinite

screen shot:

code sample:

$("#e7").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 3,
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 30) < data.total_count; // whether or not there are more results available

            // notice we return the value of more so Select2 knows if more results can be loaded
            return { results: data.items, more: more };
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

now layout is not exactly same as screenshot you provided, but check if this layout work for you.

Update:

function repoFormatResult(repo) {
  var markup = '<div class="row-fluid">' +
     '<div class="span2"><img src="' + repo.owner.avatar_url + '" /></div>' +
     '<div class="span10">' +
        '<div class="row-fluid">' +
           '<div class="span6">' + repo.full_name + '</div>' +
           '<div class="span3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
           '<div class="span3"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
        '</div>';

  if (repo.description) {
     markup += '<div>' + repo.description + '</div>';
  }

  markup += '</div></div>';

  return markup;
}

function repoFormatSelection(repo) {
    return repo.full_name;
}

Another approach:

Hi if above solution not fit for your problem then you can use this one instead. it's called typeahead.js a JavaScript library provide by twitter. you can find examples here.