jQuery Autocomplete
admin No comments

This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc. It’s easily to edit the style of the dropdown result box, there are a couple of css classes.

View the demo and get the files here:

body {color: white;background: #52616F;}
a { color: white; }
</style>
<title>j</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />

</head>
<body>

<form onsubmit="return false;" action="">
<p>
Ajax City Autocomplete: (try a few examples like: 'Little Grebe', 'Black-crowned Night Heron', 'Kentish Plover')<br />
<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>
<input type="button" onclick="lookupAjax();" value="Get Value"/>
</p>
</form>

<script type="text/javascript">
function findValue(li) {
if( li == null ) return alert("No match!");

// if coming from an AJAX call, let's use the CityId as the value
if( !!li.extra ) var sValue = li.extra[0];

// otherwise, let's just display the value in the text box
else var sValue = li.selectValue;

//alert("The value you selected was: " + sValue);
}

function selectItem(li) {
findValue(li);
}

function formatItem(row) {
return row[0] + " (id: " + row[1] + ")";
}

function lookupAjax(){
var oSuggest = $("#CityAjax")[0].autocompleter;
oSuggest.findValue();
return false;
}

function lookupLocal(){
var oSuggest = $("#CityLocal")[0].autocompleter;

oSuggest.findValue();

return false;
}


$("#CityAjax").autocomplete(
"autocomplete.php",
{
delay:10,
minChars:2,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);

</script>
</body>
</html>
admin No comments
Leave a comment

Tensor – Joomla Template
November 21, 2010 0 Comments

Tensor is a sleek template that can fit many different websites. It can have a…

Read
Levante – Corporate and Business Joomla Template
November 21, 2010 0 Comments

Levante is a simple, clean, minimalist and modern template suitable for business and corporate sites….

Read
Aiden 1.0 – Joomla 1.5 Template
November 21, 2010 0 Comments

3 Column layout Joomla 1.5 template. This Joomla template has lots of parameters. Easy to…

Read
Scorpii – Corporate and Business Joomla Template
November 21, 2010 0 Comments

Scorpii is a modern and professional Joomla 1.5 template suitable for business and corporate sites….

Read
Azimuth – Joomla corporate template
November 21, 2010 0 Comments

Azimuth is a clean template best suited for business and corporate websites. It has subtle…

Read