Auto Complete MooTools

soldatino · 31 Ott 2010

Salve ragazzi, ho trovato uno script molto interessante e molto ben fatto per l'autocompletamento molto simile alla pagina di ricerca di Google, l'unico problema è che lo script a cui punta la pagina di ricerca è un array in PHP; qualcuno sarebbe così gentile da darmi una mano a modificarlo in in modo da estrarre i valori da un db access in ASP ?
il link è MooTools

credo che possa interessare un po' tutti anche perche finora è il migliore che ho trovato.

Grazie in anticipo

Paolo69 · 5 Nov 2010

Crea una pagina in HTML con questo codice:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Auto Complete - MooTools &amp; ColdFusion</title>
	<script type="text/javascript" src="scripts/mootools.js"></script>
	<script type="text/javascript" src="scripts/Observer.js"></script>
	<script type="text/javascript" src="scripts/Autocompleter.js"></script>
	<link rel="stylesheet" href="styles/Autocompleter.css" type="text/css" media="screen" />

	<script type="text/javascript">
	/* <![CDATA[ */
	window.addEvent('domready', function() {

		// Test source, list of countries
		var tokens = ['italia', 'Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua And Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia And Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'Brunei Darussalam', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Congo, The Democratic Republic Of The', 'Cook Islands', 'Costa Rica', 'Cote D\'ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Falkland Islands (Malvinas)', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern Territories', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard Island And Mcdonald Islands', 'Holy See (Vatican City State)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran, Islamic Republic Of', 'Iraq', 'Ireland', 'Isle Of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, Democratic People\'s Republic Of', 'Korea, Republic Of', 'Kuwait', 'Kyrgyzstan', 'Lao People\'s Democratic Republic', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macao', 'Macedonia, The Former Yugoslav Republic Of', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Federated States Of', 'Moldova, Republic Of', 'Monaco', 'Mongolia', 'Montenegro', 'Montserrat', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Palestinian Territory, Occupied', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russian Federation', 'Rwanda', 'Saint Helena', 'Saint Kitts And Nevis', 'Saint Lucia', 'Saint Pierre And Miquelon', 'Saint Vincent And The Grenadines', 'Samoa', 'San Marino', 'Sao Tome And Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia And The South Sandwich Islands', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Svalbard And Jan Mayen', 'Swaziland', 'Sweden', 'Switzerland', 'Syrian Arab Republic', 'Taiwan, Province Of China', 'Tajikistan', 'Tanzania, United Republic Of', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad And Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks And Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'United States Minor Outlying Islands', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Viet Nam', 'Virgin Islands, British', 'Virgin Islands, U.S.', 'Wallis And Futuna', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe'];

		// Our instance for the element with id "demo-local"
		new Autocompleter.Local('demo-local', tokens, {
			'minLength': 1, // We wait for at least one character
			'overflow': true // Overflow for more entries
		});

	});
	/* ]]> */
	</script>
	<style type="text/css">
	#demo-local
	{
		width:350px;
		border:1px solid #444;
	}
	</style>
</head>
<body>

<h1>Auto Complete</h1>

<p>
<label for="demo-local">Country</label>
<input type="text" name="country" id="demo-local" />
</p>
</form>
</body>
</html>

ovviamente questi file devo esistere:
<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/Observer.js"></script>
<script type="text/javascript" src="scripts/Autocompleter.js"></script>
<link rel="stylesheet" href="styles/Autocompleter.css" type="text/css" media="screen" />

Successivamente, recupera queste informazioni con uno script ad hoc da un DB:

'italia', 'Afghanistan', 'Åland Islands',....

ed il gioco è fatto. L'ho provato e funziona

Paolo69 · 3 Dic 2010

Sostituisci il codice in questo modo:

Codice:

	<script type="text/javascript">
	/* <![CDATA[ */
	window.addEvent('domready', function() {

		// Test source, list of countries
		var tokens = [<%
Dim rs
Dim connessione
	connessione = "driver={Microsoft Access Driver (*.mdb)};dbq=" & server.mappath("[B]cap.mdb[/B]")

		
Set rs = Server.CreateObject("ADODB.Recordset")
	rs.ActiveConnection = connessione
	rs.Source = [B]"SELECT * FROM cap ORDER BY comune ASC" [/B]
	rs.CursorType = 0
	rs.CursorLocation = 2
	rs.LockType = 1
	rs.Open()
	rs_numRows = 0
	Rp__numRows = 15000
	Rp__index = 0
	rs_numRows = rs_numRows + Rp__numRows
While ((Rp__numRows <> 0) AND (NOT rs.EOF)) 
	Response.Write "'"&Replace((rs.Fields.Item("[B]comune[/B]").Value), "'", "&acute;")&"', "
	Rp__index=Rp__index+1
	Rp__numRows=Rp__numRows-1
	rs.MoveNext()
Wend
	rs.Close
Set rs = Nothing ' chiudo il recordset
	
		%>];

		// Our instance for the element with id "demo-local"
		new Autocompleter.Local('demo-local', tokens, {
			'minLength': 1, // We wait for at least one character
			'overflow': true // Overflow for more entries
		});

	});
	/* ]]> */
	</script>

Le voci in grassetto vanno adeguate in base alle tue esigenze...

PS: Funziona alla grande

Cerca

Cerca

Auto Complete MooTools

soldatino

Nuovo Utente

Paolo69

Moderatore

Paolo69

Moderatore

Discussioni simili