Tuesday, March 15, 2011

Jquery Autocomplete with DataSource

Hi All,

Recently i needed an autocomplete textbox in which i need to store an ID and display a list. So, i gone for Jquery autocomplete which i was very used to. I have used this before but it was just for single list where i was not storing any ID. I tried my hands on with JSON using Jquery autocomplete but it was not giving me results the way i wanted.

So, finally, i found a solution as mentioned below ::

1) A textbox for autocomplete


<input type="text" id="input" name="input"/>


2) An onload script


function loadData(){
$("#input").autocomplete('<%=request.getContextPath()%>/showMyCity.do' , {
        extraParams: { locationName : function() { 
        return document.getElementById('input').value; 
            }
         },
        minChars: 0,
        width: 185,
        matchContains: "word",
        autoFill: false,
        max:50,
        formatItem:function(row) {
            return row[0];
        },
        formatResult: function(row) {
            return row[0];
        }
    });
    
    
    $("#input").result(function(event, data, formatted) {
        if (data)
            document.getElementById("selectedLocation").value=data[1];
            
            
    });

}



3) Jsp page which results your search :


<c:forEach items="${LOCATION_LIST}" var="bean">

<c:out value="${bean.description}"/>|<c:out value="${bean.code}"/>
</c:forEach>




With a pipe character added in between, you can hide/show text on autocomplete.

This resoved my issue and i need not  have to use JSON for that.

Cheers,

Ujjwal Soni

UBS



7 comments:

bright said...

Hi Ujjwal

I liked your solution and it like its the solution I need for my problem. I however got lost when I was trying to follow through your logic. I am new to jQuery autocomplete because I have always used DWR.

do you mind sending me a full jsp and the file which is the datasource.

Thanks in Advance

Bright

Ujjwal Soni said...

Hi Bright,

Yes sure, i can send u jsp and data source files. Drop me your email address.

Cheers,

Ujjwal Soni

bright said...

bigdodo@gmail.com

Thanks

Ujjwal Soni said...

Hi Bright,

Please see below link and download autocomplete.rar file which contains the solution.

https://sites.google.com/site/ujjwalbsoni/Home/autocomplete.rar

Let me know if you have any further queries....

Cheers,

Ujjwal Soni

Dhaval Thakkar said...
This comment has been removed by the author.
Dhaval Thakkar said...

Thanks for this Tutorial..!!

Dhaval Thakkar said...
This comment has been removed by the author.