Auto Complete feature of dijit.form.FilteringSelect using Ajax and dojo.data.ItemFileWriteStore

Using Dojo widgets FilteringSelect and ItemFileWriteStore we can build a autocomplete or hint text feature for a input text box

Javascript is as follows




<script type="text/javascript">

<![CDATA[

dojo.require("dojo.data.ItemFileWriteStore");

dojo.require("dijit.form.FilteringSelect");

dojo.require("dijit.form.Button");

var couponStore;

dojo.addOnLoad(function () {

dojo.connect(dijit.byId('couponSelect'), 'onKeyUp', function () {

var xhrArgs = {

url: "/WebAdmin/report/coupon/"+ dojo.byId('couponSelect').value,

handleAs:'json',

load: function(data) {setData(data);},

error: function(error) {

dijit.byId('couponSelect').innerHTML= "An unexpected error occured" + error;

}

};

var items = dojo.xhrGet(xhrArgs);

function setData(items) {

couponStore = new dojo.data.ItemFileWriteStore({

data : {identifier:'name', items: items.items}

});

}

dijit.byId('couponSelect').set('store',couponStore);

});

});

]]>

</script>




The HTML declarative code is as follows




<div id="couponStore" dojoType="dojo.data.ItemFileReadStore" jsId="couponStore" url="/WebAdmin/report/coupon/test"/>

<form:select id="couponSelect" dojoType="dijit.form.FilteringSelect" store="couponStore" path="name" />




URL is mentioned in ItemFileWriteStore so by default it load some data into the FilteringSelect Widget.

Server Side looks something like this below

@ResponseBody

@RequestMapping(value = "/report/coupon/{coupon}")

public String filterCouponNames(@PathVariable("coupon") String name) throws JSONException {

log.info("Coupon name = {}", name);

JSONObject respObject = new JSONObject();

List<JSONObject> list = new ArrayList<JSONObject>();

List<AbstractCoupon> coupons = service.findCouponByFilter(name);

for (AbstractCoupon coupon : coupons) {

JSONObject jsonObject = new JSONObject();

jsonObject.put("id", String.valueOf(coupon.getCouponId()));

jsonObject.put("name", coupon.getName());

jsonObject.put("type",coupon.getCouponType());

list.add(jsonObject);

}

respObject.put("identifier","name");

respObject.put("items",list);

log.info(respObject.toString());

return respObject.toString();




}

Hope this information is helpful to someone who is looking to integrate auto complete feature using dojo.