javascript - How to connect autocomplete to back-end -
my code supposed show suggestions values entered user, so, need retrieve suggestions back-end.
i've found following wondering if there anyway use list rather returning json.
following function shows how make request backend provide suggestions.
function retrieve suggestions backend
function find(value){ if(window.xmlhttprequest) { xmlhttp = new xmlhttprequest(); } else { xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readystate == 4 && xmlhttp.status == 200) { document.getelementbyid("suggestions").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","search?input="+value,false); xmlhttp.send(); } the function return list of suggestions can shown user using loop following
sug.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@page contenttype="text/html" pageencoding="utf-8"%> <!doctype html> <c:foreach items="${sug}" var="mysug"> <label id="suggestion" onclick="selectsug('<c:out value="${mysug}"/>')"><c:out value="${mysug}"/></label> <br/> </c:foreach> code
<html lang="en"> <head> <meta charset="utf-8" /> <title>jquery ui autocomplete - multiple values</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { var availabletags = [ "actionscript", "applescript", "asp", "basic", "c", "c++", "clojure", "cobol", "coldfusion", "erlang", "fortran", "groovy", "haskell", "java", "javascript", "lisp", "perl", "php", "python", "ruby", "scala", "scheme" ]; function split( val ) { return val.split( /,\s*/ ); } function extractlast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away field on tab when selecting item .bind( "keydown", function( event ) { if ( event.keycode === $.ui.keycode.tab && $( ).data( "ui-autocomplete" ).menu.active ) { event.preventdefault(); } }) .autocomplete({ minlength: 0, source: function( request, response ) { // delegate autocomplete, extract last term response( $.ui.autocomplete.filter( availabletags, extractlast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove current input terms.pop(); // add selected item terms.push( ui.item.value ); // add placeholder comma-and-space @ end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">tag programming languages: </label> <input id="tags" size="50" /> </div> </body> </html>
you can use list if initialize auto complete on ajax ready state:
function find(value){ if(window.xmlhttprequest) { xmlhttp = new xmlhttprequest(); } else { xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readystate == 4 && xmlhttp.status == 200) { $("#suggestions").html(xmlhttp.responsetext); //build tag array var availabletags=new array(); $("#suggestions label").each(function(i,value) { availabletags.push($(value).text()); }); //call function initalize autocomplete when ajax request ready: initautocomplete(availabletags); } } xmlhttp.open("get","search?input="+value,false); xmlhttp.send(); } function initautocomplete(availabletags){ $("#tags").autocomplete({ minlength: 0, source: function(request, response) { response($.ui.autocomplete.filter(availabletags, extractlast(request.term))); }, //[...] }); }); } this slower calling ajax-source directly, in way should possible. can run compatibility problems don't have $.ajax. suggest not use same id in each. maybe better use this:
<label class="suggestion" onclick="selectsug('<c:out value="${mysug}"/>')"><c:out value="${mysug}"/></label> and find suggestion values label.suggestion selector.
Comments
Post a Comment