?
Solved

Need help configuring autosuggest/autocomplete script for a form

Posted on 2009-02-16
8
Medium Priority
?
923 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  
0
Comment
Question by:fsyed
  • 4
  • 4
8 Comments
 
LVL 5

Assisted Solution

by:striker46
striker46 earned 2000 total points
ID: 23647793
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

0
 

Author Comment

by:fsyed
ID: 23647869
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
0
 
LVL 5

Accepted Solution

by:
striker46 earned 2000 total points
ID: 23648132
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

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 5

Assisted Solution

by:striker46
striker46 earned 2000 total points
ID: 23648143
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
0
 

Author Comment

by:fsyed
ID: 23653268
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
0
 

Author Closing Comment

by:fsyed
ID: 31547232
Thanks so much for your time and effort, I do appreciate it.

Sincerely;
Fayyaz
0
 
LVL 5

Expert Comment

by:striker46
ID: 23657019
Do the problems you mentioned still persist?
0
 

Author Comment

by:fsyed
ID: 23663587
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
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question