Prototype is a JavaScript framework that makes web development a lot easier.
You can download it at www.prototypejs.org
You can use prototype to create an AutoComplete input box:
At first you'll need to include prototype into your website:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>
Now create an input box
<input type="text" name="q" id="query" />
and an instance of your Autocomplete object:
<script type="text/javascript">
new Autocomplete('query', { serviceUrl:'service/autocomplete.ashx' });
</script>
If you want, you can add further options:
new Autocomplete('query', {
serviceUrl:'service/autocomplete.ashx',
minChars:5,
maxHeight:350,
width:400,
deferRequestBy:100,
// callback function:
onSelect: function(value, data){
alert('You selected: ' + value + ', ' + data);
}
});
autocomplete.ashx will receive the GET request with the querystring ?query=Know - it must return JSON data as follows:
{
query:'Know',
suggestions:['Knowledge Management','Knowing','Know How'],
data:['KM','KN','KH']
}
To create a custom content from various website, we can use dapper from http://open.dapper.net/
1. click create a new Dapp
2. enter one of the url from the website that you want in the box, click "Next Step"
3. once the page is loaded, do anything you want (for example: enter the keyword in the search criteria). After the webpage show information that you want, click "Add to Basket".
4. Enter a new url, and do the same thing with point 3, click "Add to Basket". Your Dapp will work better with 2 or more sample url
5. Click "Next Step"
6. Select the content that you want to be displayed in you custom content. For example: select the name of thet product, detail information, and the price in the online shop or select the header of the news, the pictures, and the news in the news website. Give a name for each content.
7. You can also group the content if you want.
8. Preview the result. You can also go back to the previous step if you want.
9. Save you dapp.
10. Finish. Save the url that Dapper give you. You can also visit your custom content with that link/url.
First we are going to create a standard HTML form with two input fields: Name and Time. The "Name" field will be filled out by the user, and the "Time" field will be filled out with AJAX.The HTML file will be named "testAjax.htm", and it looks like this (notice that the HTML form below has no submit button!):<html><body><form name="myForm">Name: <input type="text" name="username" />Time: <input type="text" name="time" /></form></body></html>The keystone of AJAX is the XMLHttpRequest object.All new browsers use the built-in JavaScript XMLHttpRequest object to create an XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).Let's update our "testAjax.htm" file with a JavaScript that creates an XMLHttpRequest object:<html><body><script type="text/javascript">function ajaxFunction(){var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }else { alert("Your browser does not support XMLHTTP!"); }}</script><form name="myForm">Name: <input type="text" name="username" />Time: <input type="text" name="time" /></form></body></html>Example explained1. Create a variable named xmlhttp to hold the XMLHttpRequest object.2. Try to create the XMLHttpRequest object with xmlhttp=new XMLHttpRequest().3. If that fails, try xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"). This is for IE6 and IE5.To send off a request to the server, we use the open() and send() methods.The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously.The send() method sends the request off to the server. If we assume that the HTML and ASP file are in the same directory, the code would be:xmlhttp.open("GET","time.asp",true);xmlhttp.send(null);Now we must decide when the AJAX function should be executed.We will let the function run "behind the scenes" when a user types something in the "Name" field:<form name="myForm">Name: <input type="text" name="username" onkeyup="ajaxFunction();" />Time: <input type="text" name="time" /></form>Our updated "testAjax.htm" file now looks like this:<html><body><script type="text/javascript">function ajaxFunction(){var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4) { document.myForm.time.value=xmlhttp.responseText; }}xmlhttp.open("GET","time.asp",true);xmlhttp.send(null);}</script><form name="myForm">Name: <input type="text" name="username" onkeyup="ajaxFunction();" />Time: <input type="text" name="time" /></form></body></html>Now we are going to create the server-side script that displays the current time.The responseText property (explained in the previous chapter) will store the data returned from the server. Here we want to send back the current time.The code in "time.asp" looks like this:<%response.expires=-1response.write(time)%>Note: The response.expires command sets how long time (in minutes) a page will be cached on a browser before it expires. If a user returns to the same page before it expires, the cached version is displayed. response.expires=-1 indicates that the page will never be cached.