jquery - how to make the autocomplete suggestions appear in a dropdown menu and not as a normal list as text below the search box -
i have created autocomplete component datasoucre ia localhost solr.everything works fine,but need suggestions come in format of drop down menu box,but in case showing normal list , no drop down appears.
heres code,
<%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="rich" uri="http://richfaces.org/rich" %> <%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>autocomplete</title> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.ui.position.js"></script> <script type="text/javascript" src="jquery.ui.widget.js"></script> <script type="text/javascript" src="jquery.ui.autocomplete.js"></script> <script type="text/javascript"> $(function() { $("#autotextsearch").autocomplete({ source: function( request, response ) { $.ajax({ url: "http://localhost:8080/solr2/select?q=query%3a"+request.term+"*&wt=json", data: { style: "full", maxrows: 5 }, datatype: "json", type: "get", contenttype: "application/json; charset=utf-8", cache:false, asynch:false, success: function( data ) { data=parse(); function parse(){ var parsedqueries=[]; for(var i=0;i<data.response.docs.length;i++){ parsedqueries[i]=data.response.docs[i].query; } return parsedqueries; } response($.map(data, function( item ) { return { label: item, value: item }; })); } }); }, minlength: 2 }); }); </script> </head> <body> <f:view> <label for="autotextsearch">search here : </label> <input id="autotextsearch"/> </f:view> </body> </html>
Comments
Post a Comment