Ujjwal's Blog: autocomplete

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