We help IT Professionals succeed at work.

Need help configuring autosuggest/autocomplete script for a form

fsyed
fsyed asked
on
Medium Priority
960 Views
Last Modified: 2012-05-06
Dear fellow developers:

I need some help configuring the autocomplete script that is provided in this link:

http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html

I would like to set up a simple form, and because I have a long list of words that I wish to use, would like to keep this list of words in a separate file altogether and import it into my page.  I personally want to use the xml version instead of the JSON, and wish to use this in a JSP.

Can anyone help me with this?  The full documentation and code is provided in the above link, however, I can't seem to figure it out for myself.  I would appreciate it if someone could provide step by step details.  I have no problem importing the javascript file into my page.  My problem is how to set up the form, and how to set up the words that will be used to autosuggest for the autocomplete feature.  If someone could step by step show me what to do, I would greatly appreciate it.

Thanks to all who reply.
Sincerely;
Fayyaz  
Comment
Watch Question

For setting up the form you can 'clone' the one in the example page from the code below (source code)

<h3>Example (XML)</h3> 
 
<form method="get" action="" class="asholder">
 <label for="testinput_xml">Person</label>
 <input type="text" id="testinput_xml" value="" style="width:300px" /> 
 <br /><br /><input type="submit" value="submit" />
</form>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
For the example that you posted, what is id="testinput_xml"?  Is this the xml file which contains the values?  What about class="asholder"?  What is this value for?  What should the value="" be?  Once this is done, how would I set up the javascript portion?

Thanks.

Fayyaz
Create a file (for instance, index.html) and put the code below, which is in fact the sample file they provide with all the useless data removed.
Notice the JSON form is still there, but hidden. Removing it causes errors, so I guess further lines of JS must be removed if you want to even remove the code for the JSON form.
The XML form works well and fetches sample data from test.php file (included in the downloadable file from the site you provided, should be in same directory). You can change the variables to specify other sources.
Check how test.php is built to know how to build the source file for the info.
 

<html>
<head>
<title>Ajax auto-suggest / auto-complete | BrandSpankingNew</title>
 
<script type="text/javascript" src="js/bsn.AutoSuggest_2.1.3.js" charset="utf-8"></script>
 
<link rel="stylesheet" href="css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
 
<style type="text/css">
 
	body {
		font-family: Lucida Grande, Arial, sans-serif;
		font-size: 10px;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	table
	{
		border: 1px;
		background-color: #999;
		font-size: 10px;
	}
	tr
	{
		vertical-align: top;
	}
	th
	{
		text-align: left;
		background-color: #ccc;
	}
	th,
	td
	{
		padding: 2px;
		font-family: Lucida Grande, Arial, sans-serif;
		font-size: 1.2em;
	}
	td
	{
		background-color: #fff;
	}
	
	a {
		font-weight: bold;
		text-decoration: none;
		color: #f30;
	}
	
	a:hover {
		color: #fff;
		background-color: #f30; 
	}
	
	#wrapper {
		width: 600px;
		margin: 10px auto;
		text-align: left;
	}
	
	#content {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	
	#content h1 {
		font-size: 1.6em;
		border-bottom: 1px solid #ccc;
		padding: 5px 0 5px 0;
	}
 
	#content h2 {
		border-top: 1px solid #ddd;
		padding-top: 5px;
		font-size: 1.2em;
		margin-top: 3em;
	}
	
	#content h3 {
		font-size: 1.1em;
		margin-top: 3em;
	}
 
	small
	{
		color: #999;
	}
 
 
 
 
 
 
	label
	{
		font-weight: bold;
	}
 
	
	
	
	/*
	the parent element of an autosuggest input should have a relative position
	*/
	.asholder
	{
		position: relative;
	}
 
 
 
 
 
 
	
</style>
 
 
</head>
<body>
 
<div id="wrapper">
<div id="content">
 
 
<div>
 
<form method="get" action="" class="asholder">
    <input type="hidden" id="testid" value="" style="font-size: 10px; width: 20px;" disabled="disabled" size="20" /></small>
	<input style="width: 200px" type="hidden" id="testinput" value="" size="20" /> 
	<input type="hidden" value="submit" />
</form>
</div>
 
 
 
<h3>Example (XML)</h3>
 
<div>
<form method="get" action="" class="asholder">
	<label for="testinput_xml">Person</label>
	<input type="text" id="testinput_xml" value="" style="width:300px" size="20" /> 
	<br /><br /><input type="submit" value="submit" />
</form>
</div>
 
 
</div>
</div>
 
 
<script type="text/javascript">
	var options = {
		script:"test.php?json=false&limit=6&",
		varname:"input",
		json:false,
		shownoresults:false,
		maxresults:6,
		callback: function (obj) { document.getElementById('testid').value = obj.id; }
	};
	var as_json = new bsn.AutoSuggest('testinput', options);
	
	
	var options_xml = {
		script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; },
		varname:"input"
	};
	var as_xml = new bsn.AutoSuggest('testinput_xml', options_xml);
    </script>
 
 
 
</body>
</html>

Open in new window

ID is for JS knowing what form item is taking the input of data
ASHOLDER class is for CSS styling
Value is empty because it will be filled with whatever you input in the text box

Author

Commented:
Thanks striker46 for your help.  A couple of issues I'm having here:

1.  I created the file index.html as you suggested and when I open it up, I am getting a javascript error saying Line 677 Char 3, Access is denied in Internet Explorer.  In Firefox, I get an Ajax error.  This happens also when I try to use the default bsn.AutoSuggest_2.1.3.html file that the download comes with.

2.  I see how the test.php file holds the records to compare against.  However, I realize that the file is in php.  My application that I wish to use it in is in JSP.  Is there a way that I can convert the php code into something more neutral (eg. javascript, or even Java/JSP) so that it works with my application?

Thanks again for your help.  I really do appreciate it.

Sincerely;
Fayyaz

Author

Commented:
Thanks so much for your time and effort, I do appreciate it.

Sincerely;
Fayyaz
Do the problems you mentioned still persist?

Author

Commented:
Unfortunately they do, as due to my ignorance, didn't realize that to run the script, I would need to run it on a php server (which I don't have).  Having said that, I realize at this point that I need to create an equivalent test.jsp file to do this.  If it's possible, if you could provide for me a translation of the test.php file in pseudocode so that I know what is going on, I would sincerely appreciate it.  From there, I can figure out the java/jsp code on my own, to make it work with my application.  If you are unable to do this, then don't worry about it, you've done your part. :-)

Thanks again.
Sincerely;
Fayyaz
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.