Home/ Questions/Q 9076133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T19:02:37+00:00

I am trying to use http://jqueryui.com/autocomplete/#multiple-remote on my site, but i can’t get it

  • 0

I am trying to use http://jqueryui.com/autocomplete/#multiple-remote on my site, but i can’t get it to give correct results.

My HTML is :

<input id="movies-text" size="50" />

My Jquery code is : 

$('#movies-text').autocomplete({
    minLength:3,
    source:function(request,response){
        $.getJSON('searchmovies.jsp',{q:request.term},function(result){
            response($.map(result,function(item){
                return item.value;
            }));
        });
    }
});

And searchmovies.jsp looks like this :

<%@ page contentType="application/json" language="java" import="java.sql.*" errorPage="" %>
<%
   response.setContentType("application/json");
   response.setHeader("Content-Disposition", "inline");
%>

[
    {"value":"Pulp fiction"},
    {"value":"The hobbit"},
    {"value":"Apocalypse Now"},
    {"value":"As good as it gets"},
    {"value":"Annie hall"},
    {"value":"Butch Cassidy and the sundance kid"},
    {"value":"Terminator"}
]

It gives all the values in the dropdown no matter what i type.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here for your case you have two options,

    Option1: Populating json based on request term (Best Approach)

    Your jsp response should match with the query string, here you are blindly populating all the values as response but it should be based on your request string.

    For Example,

    If your input string is “Pulp” then your jsp should return back only,

     [{"value":"Pulp fiction"}}

    There is nothing to complain about jQuery its working based on its nature and you need to tweak your server side json to produce the output based on your input query.

    Option2: Adding a filter to the whole populated Objects

    Consider this example test.html,

    <html>
<head>
    <title>jQuery UI Autocomplete - Remote Data functionality with Filter</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>

function loadData(){
    var movie_elements;
    $('#movies-text').autocomplete({
        minLength:3,
        source:function(request,response){
           $.getJSON('searchmovies.jsp',{q:request.term},function(result){
            movie_elements = $.map(result,function(item){return item.value;});
            response( $.ui.autocomplete.filter(movie_elements, extractLast( request.term ) ) );
           });
        }
    });
}

function split( val ) {
            return val.split( /,\s*/ );
        }

function extractLast( term ) {
            return split( term ).pop();
        }
    </script>
</head>
<body onload="loadData();">
<input id="movies-text" size="50" />
</body>
</html>

    Pick the one which suits best for you.

    • 0