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



5 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...

take a look at this autocomplete, it's awesome, http://justwebcode.blogspot.com/2017/07/autocomplete-textbox-with-jquery.html