Autocomplete

[paull]

i am trying to make an autocomplete box using yahoo libraries. trying to fill the list of data from database . framework is spring & hibernate. can anyone help me out with this?

[acoder]

YUI has an autocomplete widget - see http://developer.yahoo.com/yui/autocomplete/

[paull]

Please have a look into my code

<div id="myAutoComplete"> 
<input type="text" name="quickAddInput" id="quickAddInput" class="input" >
 <div id="autoCompleteContainer"></div>
  </div>
 <script type="text/javascript">
// An XHR DataSource
var mySchema = ["ResultSet.Result", "PartNo"];
var myDataSource = new YAHOO.widget.DS_XHR("http://156.150.107.223:8080/eagle/ncdetail.do", mySchema);
myDataSource.scriptQueryAppend = "method=getPartNos";														
var myAutoComp = new YAHOO.widget.AutoComplete("quickAddInput","autoCompleteContainer", myDataSource);
myAutoComp.prehighlightClassName = "yui-ac-prehighlight";
// Display up to 10 results in the container
myAutoComp.maxResultsDisplayed = 10
// Require user to type at least 1 characters before triggering a query 
myAutoComp.minQueryLength = 2 ;
// Enable a drop-shadow under the container element
myAutoComp.useShadow = true;
myAutoComp.autoHighlight = false;
// Define a custom formatter function
 var fnCustomFormatter = function(oResultItem, sQuery) {
 var sKey = oResultItem[0];						       
 var aMarkup = ["<div class='sample-result'><span class='sample-key'>",
 sKey,"</span></div>"];
 return (aMarkup.join(""));
  };
 myAutoComp.formatResult = this.fnCustomFormatter; 							
</script>

and this is the function which returns the list of values:

public ActionForward getPartNos(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)   
 { 
 ArrayList partNos = new ArrayList();
 ItemMasterVo itVo=new ItemMasterVo();
 String ptNos = "";
 String result = "";
result = result + "{\"ResultSet\":{\"Result\":[ ";
 try{			
	partNos=(ArrayList)itemManager.getItemMasters();
	ServletOutputStream out = response.getOutputStream();			
	int i=0;
	if (partNos != null) {
	Iterator it = partNos.iterator();
	while (it.hasNext()) {
		itVo = (ItemMasterVo) it.next();
		result = result + "{\"PartNo\":" + "\"" + itVo.getStrItemNo() + "\"}";
		if (i < partNos.size() -1 )
 	      result = result + ",";
		i++;
		}
	}
 out.println(result);
 out.flush();
 out.close();				
 }
 catch(Exception e){
	  System.out.println("exception " + e.getMessage());
 }
 return null;
 }

.Values are not displaying in the jsp page and it shows a javascript error 'Exception thrown and not caught'.
Do u have any idea what is the problem?

[acoder]

Which line does the error occur on? Have you tried a simple version first? Also, check that the server-side code is working properly.

[paull]

The error occurs where it returns from the action class. It gets the correct values to the variable 'result' and the exception throws after the return statement

[acoder]

That suggests that there may be a problem in the JSP code. Try a simple data set first (e.g. a simple local array data source) and see if the autocomplete works with that.

[paull]

Yes , the local array data source worked!!! but the pblm is that it will show all the values in the view source. we need to avoid that.

[acoder]

That was the plan, so we know that it's a problem with acquiring the data.

Are you using the latest version? If so, scriptqueryAppe nd has been deprecated in favour of generateRequest (of Autocomplete). See an example. This is mentioned on the Autocomplete page linked to earlier.

[paull]

autocomplete

I use YUI version 2.5.2. scriptqueryAppe nd cannot be used in this version?

[acoder]

Then it should be OK because the changes took effect in version 2.6.0, though I would say that you should try to use the latest version if at all possible.