Is it possible to put a button inside autocomplete in jquery ui plugin?

Ranch Hand

Posts: 45

posted 8 years ago

My requirement:
I have a 4 text input fields that I want to implement autocomplete functionality. If the input does not match the dropdownlist, 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.

My problem:
I have put a button in the dropdownlist 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.

1. 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 );
		}

bValid = bValid && checkLength( sectorinput, "sectorinput", 3, 16 );
					//bValid = bValid && checkLength( email, "email", 6, 80 );

bValid = bValid && checkRegexp( sectorinput, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );

$( 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

});
</script>

<div style="float: left">
<p><strong> </strong></p>
<div id="firstpane" class="menu_list">
	<p class="menu_head">Setup</p>
		<div class="menu_body">
			<a >Setup Unit Detail</a> 
			<a >Setup Emission Source</a> 
			<a ></a>
		</div>
	<p class="menu_head">Audit</p>
		<div class="menu_body">
			<a >Link-1</a> 
			<a >Link-2</a>
			<a >Link-3</a>
		</div>
	<p class="menu_head">Report</p>
	<div class="menu_body">
		<a >Link-1</a> 
		<a >Link-2</a>
		<a >Link-3</a>
	</div>
</div>

</div>

<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>
 					
 				</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

3. my bean: AutoCompleteBean

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 = autoCompleteBean.getSectorList();
	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;
	}
	
	
}

I love this place!

shankhas sanyal

Ranch Hand

Posts: 45

posted 8 years ago

i fixed it by putting

then showAlert() calls the dialog

I love this place!

It is sorta covered in the JavaRanch Style Guide.

Is it possible to put a button inside autocomplete in jquery ui plugin?

Similar Threads