Is it possible to put a button inside autocomplete in jquery ui plugin?
My requirement:
I have a 4 text input fields that I want to implement autocomplete functionality. If the input does not match the drop-down-list, I want to put a button that will open a jquery modal form, that the user can enter the desired data which will update the list. I am implementing this using simple jsp and tomcat
My problem:
I have put a button in the drop-down-list when the input does not match. When its clicked, nothing happens, and html code for the button gets populated in the input field.
Where am i going wrong? Can you please help me? My code is given below.
index.jsp
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<script src="js/jquery.autocomplete.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css">
<script src="js/jquery-1.5.1.js"></script>
<script src="js/external/jquery.bgiframe-2.1.2.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.button.js"></script>
<script src="js/ui/jquery.ui.draggable.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.resizable.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>
<script src="js/ui/jquery.effects.core.js"></script>
<link rel="stylesheet" href="css/demos.css">
<style type="text/css" >
body {
margin: 10px auto;
font: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
}
.menu_list {
width: 160px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin: 1px;
font-weight: bold;
background: #eef4d3 url(images/left.png) center right no-repeat;
}
.menu_body {
display: none;
}
.menu_body a {
display: block;
color: #006699;
background-color: #EFEFEF;
padding-left: 10px;
font-weight: bold;
text-decoration: none;
}
.menu_body a:hover {
color: #000000;
text-decoration: underline;
}
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
var sectorinput = $( "#sectorinput" ),
allFields = $( [] ).add( sectorinput ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#addSector-Form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add a new sector": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( sectorinput, "sectorinput", 3, 16 );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-sector" )
.button()
.click(function() {
$( "#addSector-Form" ).dialog( "open" );
});
});
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(
function() {
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(
function() {
$(this).css( {
backgroundImage : "url(images/down.png)"
}).next("div.menu_body").slideToggle(300).siblings(
"div.menu_body").slideUp("slow");
$(this).siblings().css( {
backgroundImage : "url(images/left.png)"
});
});
//slides the element with class "menu_body" when mouse is over the paragraph
/*
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(images/left.png)"});
});
*/
//$("#addSector").fancybox();
});
</script>
<div style="float: left"><!--This is the first division of left-->
<p><strong> </strong></p>
<div id="firstpane" class="menu_list"><!--Code for menu starts here-->
<p class="menu_head">Setup</p>
<div class="menu_body">
<a href="#">Setup Unit Detail</a>
<a href="#">Setup Emission Source</a>
<a href="#"></a>
</div>
<p class="menu_head">Audit</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Report</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
</div>
<!--Code for menu ends here-->
</div>
<!--
<h3>Country</h3>
<input type="text" id="country" name="country"/>
<script>
$("#country").autocomplete("getdata.jsp");
</script>
-->
<div style="float: left; margin-left: 20px;">
<form>
<fieldset>
<legend>Setup Unit Details</legend>
<table>
<tr>
<td>
<label for="sector">Sector</label>
</td>
<td>
<input type="text" name="sector" id="sector">
</td>
<!--
<td>
<input type="button" name="addsector" value="add sector" onclick="addNewSector();">
</td>
-->
</tr>
<tr>
<td>
<label for="org">Organisation</label>
</td>
<td>
<input type="text" name="org" id="org">
</td>
</tr>
<tr>
<td>
<label for ="op">Operation</label>
</td>
<td>
<input type="text" name ="op" id="op">
</td>
</tr>
<tr>
<td>
<label for="unit">Unit</label>
</td>
<td>
<input type="text" name="unit" id="unit">
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<script>
$("#sector").autocomplete("getdata.jsp");
</script>
<div id="addSector-Form" title="add a new Sector">
<form>
<fieldset>
<label for="sectorinput">Sector</label>
<input type="text" id="sectorinput" name="sectorinput" value="" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
</div>
</body>
</html>
2. getdata.jsp
- <%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="com.myautocomplete.Action.DummyDB"%>
<%@page import="com.myautocomplete.bean.AutoCompleteBean" %>
<%
DummyDB db = new DummyDB();
String query = request.getParameter("q");
List<String> countries = db.getData(query);
Iterator<String> iterator = countries.iterator();
while(iterator.hasNext()) {
String country = (String)iterator.next();
out.println(country);
}
%>
3. AutoCompleteBean.java
- package com.myautocomplete.bean;
import java.util.ArrayList;
import java.util.List;
public class AutoCompleteBean {
private String sector;
private List <String> sectorList;
public AutoCompleteBean(){
this.sectorList = new ArrayList<String>();
}
public String getSector() {
return sector;
}
public void setSector(String sector) {
this.sector = sector;
this.sectorList.add(this.sector);
}
public List<String> getSectorList() {
return sectorList;
}
public void setSectorList(List<String> sectorList) {
this.sectorList = sectorList;
}
}
4. DummyDB.java
- package com.myautocomplete.Action;
import com.myautocomplete.bean.AutoCompleteBean;
import java.util.List;
import java.util.ArrayList;
import org.apache.log4j.*;
public class DummyDB {
Logger logger = Logger.getLogger(DummyDB.class);
AutoCompleteBean autoCompleteBean = new AutoCompleteBean();
List <String> sectorList = null;
int totalSectors;
public DummyDB(){
sectorList = autoCompleteBean.getSectorList();
sectorList.add("Iron and Steel");
sectorList.add("Petrolium");
sectorList.add("Cement");
totalSectors = sectorList.size();
}
public List<String> getData(String query){
String country = null;
query = query.toLowerCase();
List<String> matched = new ArrayList<String>();
List<String> doesNotMatch = new ArrayList<String>();
for(int i=0; i<totalSectors; i++) {
country = sectorList.get(i).toLowerCase();
if(country.startsWith(query)) {
matched.add(sectorList.get(i));
logger.debug(matched);
//return matched;
}else{
doesNotMatch.add("<button id=\"create-sector\">Add Sector</button>");
//doesNotMatch.add("window.open()");
logger.debug(doesNotMatch);
//return doesNotMatch;
}
}
if(matched.isEmpty()==false){
return matched;
}
else{
for(int i=0;i < doesNotMatch.size();i++){
doesNotMatch.remove(i);
// logger.debug(doesNotMatch);
// System.out.println("doesntNotMatch: "+doesNotMatch);
}
return doesNotMatch;
}
// return matched;
}
}