Hi, It's been a long time since my last post about google map. This time I'm going to talk about AJAX autocomplete function. Let's see a sample from the most famous website i've known.
Good News is, It's very easy and you can do it. Just follow my step. First, I'll explain how it works. Most AJAX Libraries require response from server. Every information you want to retrieve from server must be in form of "response" or "JSON" (JavaScript object just like XML for JavaScript). Our Application here is one of examples that i'm going to show you how to retrieve information from server by Response object. Either ASP.NET or PHP can deal with response. So AJAX Library can be applied to those language. All you need to do's write a JavaScript to retrieve response from the server side
Here's an step of how this "Autocomplete" Thing work
- Load JavaScript library, initialize and wait for input from user.
- User type in letter. Value's passed by "FORM" request to a page named "Default.aspx".
- Default.aspx read dictionary file and response to client in a form of unordered list text.
- Browser show suggestion to user. User can choose and the text in textbox's completed.
How Simple! here my example
Start!
1. Declare input and output, input is for input from user(Form Request). And output's string output (<ul><li>first item</li><li>second item</li></ul>).
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 String output = "";
4 String input = Request.Form["paramX"];
5 }
Declare it in Page_Load event of Default.aspx
2. Deal with string with space. I'll split the line into array of word. and suggest only the last word. Always response the former text.
1 if (input != null)
2 {
3 String[] arrayS;
4 arrayS = input.Split(' ');
5 for (int i = 0; i < arrayS.Length - 1; i++)
6 {
7 output += arrayS[i] + " ";
8 }
9 input = arrayS[arrayS.Length - 1];
3. Open an fileStream and read "dict.txt". Compare words in the file with input (last word of array) and response in unordered list string
1 using (FileStream fs = new FileStream(Server.MapPath("dict.txt"), FileMode.Open))
2 {
3 using (StreamReader reader = new StreamReader(fs))
4 {
5 String tmp;
6 Response.Write("<ul>");
7 while (!reader.EndOfStream)
8 {
9 tmp = reader.ReadLine();
10 if (tmp.Length >= input.Length && tmp.Substring(0, input.Length) == input || tmp == input) Response.Write("<li>" + output + tmp + "</li>");
11 }
12 Response.Write("</ul>");
13 }
14 }
4. Now, we've done with Default.aspx. This page'll act as service that response text from dictionary when an AJAX Library tried to request the list of suggested word. Next thing, we'll build a page that'll use an AJAX library called "Script Aculo" which has an Autocomplete built-in function. Here's the source code
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head runat="server">
3 <title></title>
4 <script src="js/prototype.js" type="text/javascript"></script>
5 <script src="js/scriptaculous.js" type="text/javascript"></script>
6 <script src="js/controls.js" type="text/javascript"></script>
7 <style type="text/css">
8 /*
9 div.autocomplete {
10 position:absolute;
11 width:500px;
12 background-color:white;
13 border:1px solid #888;
14 margin:0;
15 padding:0;
16 }*/
17 ul {
18 list-style-type:none;
19 margin:0;
20 padding:0;
21 }
22 ul li:hover { background-color: #ffb;}
23 ul li {
24 list-style-type:none;
25 display:block;
26 margin:0;
27 padding:2px;
28 cursor:pointer;
29 }
30 </style>
31
32 </head>
33 <body>
34 <form id="form1" runat="server">
35 <div>
36 <input type="text" id="autocomplete" name="autocomplete_parameter"/>
37 <div id="autocomplete_choices" style=" height:150px; overflow:auto;"></div>
38 <script type="text/javascript">
39 new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "Default.aspx", {
40 paramName : "paramX" 41 });
42 </script>
43 </div>
44 </form>
45 </body>
46 </html>
First thing, include an AJAX library in <head>. Load Script Aculo From www.script.aculo.us It require PROTOTYPE.JS (another javascript library)
put this into your <head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/controls.js" type="text/javascript"></script>
Include downloaded script into your <head>. Then put input box into your <body>
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" style=" height:150px; overflow:auto;"></div>
Last thing to do! Put javascript after that.
<script type="text/javascript">
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "Default.aspx", {
paramName : "paramX"
});
</script>
As usual! Compare your result here.
8e616765-ff8a-4c69-91c7-8d67d146b64f|1|5.0