|
JavaScript - Suburb/state/postcode Autocomplete
http://auspost.com.au/apps/postcode.html
Basically I want to build the same thing. The data is freely available there as a download. I couldn't find anything existing in the jquery plugin space. Can anyone offer pointers on how to achieve it? Similar TutorialsHere is what I'm envisioning: The user selects a state, then in the 'Cities' box, he starts typing the name of his city. However, it autocompletes the name for him based on the state he chose. So if he chose California and started typing in "Los Angeles", it would autocomplete "Los Angeles" for him. Does that make sense? Is there a script out there that can do this? I was wondering if there was a simple way of notifying a user who has entered an incorrect postcode? I have found numerous answers to this problem but i am sure there is a simpler way to do it as ones i have found have rows and rows of code. Help is much appreciated Hi all, I have a script that validates a postcode, including checking that the 4th character from the end of the postcode is a space. To save sending you back to the postcode textbox to correct the error, how can I automatically force a space at the 4th character position from the end of the postcode? ie, CM12JB is wrong. Need to change it to CM1 2JB. Any ideas? Gary Hi, I would like to set the postcode Code: <?php echo $pubdetails['rsPostCode]; ?> as a default value in the form field so that the map area loads up automatically for instance the link above uses postcode bn11 3rg thanks Hi, basically it's a simple postcode validator. It checks to see whether the postcode is in UK format, then tells you if it isn't with an alert box, then I want it to clear the field. The input field's ID is postcode. Code: function testPostCode () {
var myPostCode = document.getElementById('postcode').value;
if (checkPostCode (myPostCode)) {
document.getElementById('postcode').value = checkPostCode (myPostCode)
}
else {alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.")};
document.postcode.value="";
}
Anyone able to help me? So I found this code and I've manipulated it a little bit for what I want. It was designed to autocomplete an input field when countries were typed, but I changed the values to match ingredients or cooking terms, etc. I was wondering if it would be possible through javascript to autcomplete a word after one is already typed in the input field. For instance, if one person types an 'f' into the input field it will suggest 'flour' as an autocomplete, but if the person types 'f' again, it will not perform the same autocomplete function. How would you go about doing that? Thank you! Code: <head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
countries = new Array(
"flour",
"cup",
"tsp.",
"tbsp.",
"lb.",
"pound",
"tablespoon",
"teaspoon",
"sugar",
"olive oil",
"vegetable oil",
"gallon",
"quart",
"qt."
);
var sug = "";
var sug_disp = "";
function getCountry() {
var input = document.forms['address_frm'].country.value;
var len = input.length;
sug_disp = ""; sug = "";
if (input.length) {
// get matching country from array
for (ele in countries)
{
if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
{
sug_disp = input + countries[ele].substr(len);
sug = countries[ele];
break;
}
}
}
document.forms['address_frm'].sug_country.value = sug_disp;
if (!sug.length || input == sug_disp)
document.getElementById('sug_btn').style.display = "none";
else
document.getElementById('sug_btn').style.display = "block";
}
function setCountry() {
document.forms['address_frm'].country.value = sug;
hideSug();
}
function hideSug() {
document.forms['address_frm'].sug_country.value = "";
document.getElementById('sug_btn').style.display = "none";
}
</script>
</head>
<body>
<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
<div></a>
<div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
<input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
</div>
<div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
<input autocomplete="off" type="text" name="country" style="background: none; color:#000; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
</div>
<div id="sug_btn" style="position: absolute; top: 2px; right: 5px; z-index: 4; display:none;">
<p onclick="setCountry()" style="cursor:pointer">></p>
</div>
</div>
</form>
</div>
</div>
</body>
How do I fix the problem that autocomplete does not validate, I have heard before that there is a dirty way to do this but did not want to do this before, but now feel i must as my boss wants the site error free ! does anyone know how I do this ? Hello, I have a problem with autocomplete of jQuery. Here is my code Code: $('input#recipient').autocomplete ({
source: function (request, callback) {
var dataString = {username : request.username};
$.ajax({
url: url.root + 'email/',
data: dataString,
//cache: false,
complete: function(xhr, result) {
if(result != 'success') return;
var response = xhr.responseText;
var usernameList = [];
$(response).filter('li').each (function() {
usernameList.push($(this).text());
)};
callback(usernameList);
}
});
}
});
Can you tell me what's the problem Thank you Hi So, I have a working single autocomplete function, but I want to use the same function on different fields.... this is my code: Code:
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<div>
<form>
<script type="text/javascript">
var index = '1';
</script>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them... Any suggestions would be appreciated Hello, i have coded this page: http://www.advance2000.net/system/ad...rchasepeso.php click on the "ADD ITEM" button TWICE. now you have created two rows of textboxes. next, enter the letter "M" on the description textbox on the second row. this would then initialize an autocomplete function... you will see two words "memory" and "motherboard" try clicking one of these.. after clicking, i guess you will notice the error in my program. the clicked value (for example "memory") would be sent in the FIRST ROW TEXTBOX instead of the second.... can anyone help me? Here is the Code of the said Dynamic Textbox: Code: <script language ="javascript">
row_no=0;
function addRow(tbl,row){
row_no++;
if (row_no<=200){
if (row_no<=200){
if (row_no>=100){
var textbox = '<input type="text" id="item[]" value='+row_no+' size = "2" maxlength= "99" name="item[]>"';}
if (row_no<100){
var textbox = '<input type="text" id="item[]" value='+row_no+' size = "2" maxlength= "99" name="item[]">';}
var textbox2 = '<input type="text" id="stockcode[]" size = "20" maxlength= "100" name="stockcode[]">';
var textbox3 = '<input type="text" autocomplete="off" id="description" size = "95" maxlength= "100" name="description" onkeyup="lookup(this.value);" onChange="fill();"><div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /><div class="suggestionList" id="autoSuggestionsList"></div>';
var textbox4 = '<input type="text" id="qty'+row_no+'" size = "6" maxlength= "100" onChange="Sum()" name="qty[]">';
var textbox5 = '<input type="text" id="price'+row_no+'" size = "15" maxlength= "100" onChange="Sum()" name="price[]">';
var textbox6 = '<input type="text" id="subtotal'+row_no+'" size = "15" maxlength= "101" onChange="Grand()" name="subtotal[]" readonly>';
var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;
var newCell = newRow.insertCell(4);
newCell.innerHTML = textbox5;
var newCell = newRow.insertCell(5);
newCell.innerHTML = textbox6;
}
if (row_no>200){
alert ("Too Many Items. Limit of 20.");
}
}
}
</script>
The VAR TEXTBOX 3 would create the said "description textbox" that is also the textbox that calls the "Fill()" and the Lookup() function of the autocomplete HERE, we have the said functions: Code: function lookup(description) {
if(description.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+description+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#description').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
Hi all, I am trying to create a dependend autocomplete (based on JQuery) box for example: Field 1 has a autocomplete value of America. Field 2 has to fetch based on the value America the availible states like Kansas However if field 1 has the value England i want field 2 to reflect this by offering for example Schotland. I have the following code in place: Code: $(
document).ready(
function() {
var ac_config = {
source: "getcountry.php",
select: function(event, ui){
$("#
field1").val(ui.item.name),
$("#
field1hidden").val(ui.item.id);
},
minLength:3
};
$("#
field1").autocomplete(ac_config);
}
);
The code above will autocomplete the field1 (country's) input field and an hidden id field. Now i want to base the selection of field2 (the states) on the returned value in field1. i have the following code to try and do this (placed inside document.ready function()): Code:
var stateinput = document.getElementById('field1').value
var ac_config2 = {
source: "getstate.php?country=" + stateinput,
select: function(event, ui){
$("#
field2").val(ui.item.name),
$("#
field2hidden").val(ui.item.id);
},
minLength:3
};
$("#
field2").autocomplete(ac_config);
However the selection is not restricted based on the given input. Can anybody tell me what i am doing wrong? Thanx in advance..... Hi there Im a relative newbie and am trying to have a searchbar that users can complete, with the text entry being from a pre-defined list. The hope is that a new page will open with the link that relates to the search bar entry. Im using an Autocomplete code but cant work out how to get the link part to work. See below code Code: <html>
<head>
<script src="jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "092 610 343 505 Utilities".split(" ");
$("#example").autocomplete(data);
});
var data = [ {text:'Link A', url:'/page2'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});
</script>
</head>
<body>
Number: <input id="example" /><p></p>
</body>
</html>
Can someone help me complete this code? For example, how can I change the code so that a text entry of "092" opens "www.google.com" when I hit enter after text entry? Your help with this is greatly appreciated Glen I want to use a database query to grab all of a member's friends from a table in order to add the friend's email address to a form, to ready it for POSTing. I am using the jquery ui, so on my form.php page, I have the script and html: Code: <script>
$(function() {
$( "#friendsearch" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.id + " " + ui.item.value :
"Nothing selected, input was " + this.value );
}
});
});
</script>
<form>...
<input id="friendsearch" />
</form>
And on my search.php I have: Code: //code to connect to database.... etc
$query = "
//this code goes through a table LEFT JOIN to grab a list of the logged-in member's friends' info (id, email, first name, last name)
"
$sql = mysql_query($query);
while($row = mysql_fetch_array($sql)) {
$fid = $row["id"];
$firstname = $row["firstname"];
$lastname = $row["lastname"];
$email = $row["email"];
echo $fid <br /> $f_firstname <br /> $f_lastname <br /> $email <br /> ";
The "echo" above works. It lists out all the info perfectly, so I know my query is good. The problem, I am having, is with what comes next in the search.php: Code: $q = strtolower($_GET["term"]);
// supposed to do something with $q here (not sure what!)
$return = array();
while ($row = mysql_fetch_array($query)) {
array_push($return,array('id'=>$row['firstname'],'value'=>$row['lastname']));
}
echo(json_encode($return));
This is the part that's suppose to work with the jquery autocomplete. I know it's wrong, but I need to know how I can fix it to do the following: 1) when the user starts typing the first name or last name of the friend, auto-complete shows a drop-down list of firstname lastname. 2) once the friends' names are placed in the input box, on submit, i want to POST the friends' email addresses (not their name)! Complex, I know... Any help would be much appreciated! Thanks, June Hi All, Im a newbie when it comes to Javascript and trying to learn as I go along. I am working on an internal work site. In the site I have a text box and on entering a specific code I want it to open a new page that links to a document that has the same name. ie. if user types red, I want it to find the document red.html in a folder. To make my colleagues job easier, I want the text box to autocomplete. Below is a section of the code I plan to use Code: <script> var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"]; </script> </head> <body> <h2>Autocomplete Textbox Example</h2> <p>Type in a color in lowercase:<br /> <input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p> </body> </html>Can anyone help me to modify this to: 1) link the text entered to the document I want opened 2) open this document upon 'enter' pressed If anyone can provide help it will be greatly appreciated. Thanks Glen I have a JQuery autosuggest working properly on my form.php page... Now I want to get my form to actual POST the input values. So currently if I just run search.php, I get the following (using echo json_encode): {"label":"Henry Gale","value":"henrygale@gmail.com"},{"label":"Amy Gerges","value":"amy@yahoo.com"}, and the list goes on. So since the search is working properly. Now, I want to POST only the values that I place in the form's input field. I currently have: Code: <script>
$(document).ready(function() {
$( "#autocomp" ).autoSuggest("search.php", {
minChars: 2,
selectedItemProp: "label",
searchObjProps: "label",
selectedValuesProp: "value",
selectionLimit: 8,
formatList: function(data, elem){
var my_image = data.image ;
var my_label = data.label;
var new_elem = elem.html(my_image + my_label);
return new_elem;
}
});
});
</script>
<input name="contacts" type="text" id="autocomp" maxlength="35" />
But if I do an echo of the $_POST['contacts'] I just get the word: Array I am doing something wrong, just not sure what... Since my input gets a list of comma separated values, how can I: 1) make sure the input values get the "value" attribute which corresponds to the emails. 2) post the emails so I can do things with the emails (run them through format checks, insert them into a mysql db, etc). I would like to use a JavaScript to fill in the total based on the responses given by the user in this form stub:
Code: <!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>
<title>Formstub</title>
</head>
<body>
<form id="theform" id="theform" action="formstub.html" method="post">
<table width="90%" border = "1
" style="margin-left:40px; font-family: helvetica, ariel, sans-serif; font-size: 0.95em; color: #2D8AB9;">
<tr style="height:3em">
<td width="2em"><input type="checkbox" name="skipperReg" id="skipperReg" value="30" /></td>
<td width="12em">Registration Fee</td>
<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" value="30" style="text-align:right" /></td>
<td width ="20em"> </td>
</tr>
<tr>
<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" /></td>
<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" value="8" style="text-align:right" /></td>
<td> # Guests <input type="text" name="guestQty" id="guestQty" size="2" /></td>
</tr>
<tr>
<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" /></td>
<td>Misc</td><td>$<input type="text" name="miscTotal" size ="2" style="text-align:right" /></td>
<td> List details <input type="text" name="miscDetails" size="35" /></td>
</tr>
<tr style="height:2em"><td > </td>
<td>Total</td><td>$<input type="text" id="total" name="total" size ="2" style="text-align:right" ></td>
</tr>
</table>
</form>
</body>
</html>
The script should add the skipperfee to the total if the skipperReg box is checked, multiply the guestFee by the guestQty and add that to the total if the guestReg box is checked, and add the miscTotal to the total if the miscAmt box is checked. i have this, Code: $(function() {
$('#input').autocomplete('test.php', {json: true});
});
that bring back values from the database here is my php section Code: $result = mysqli_query($db,$query);
while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}
$return = array();
foreach ($aResults as $key => $res) {
$return[] =$res['value'] . ' , ' . $res['info'];
}
echo json_encode($return);
}
}
}
i would like, when i select a name from the auto suggest to be able to have the id be filled in a input text area... uncle Google says this, but i am having a hard time implementing it. Code: myCallback = function(li, $input) {
// I need to refer to the appropriate "myXxxInput" here
alert($input.attr('id'));
}
setup = function() {
setupInput($('#myFirstInput'));
setupInput($('#mySecondInput'));
}
function setupInput($input) {
$input.autocomplete('blah.php', {onItemSelect: function(li) {
myCallback(li, $input);} });
}
Hi, I am using jQuery for the following scenario: There is a random number of divs, each sharing the same class (.slecteable), each having its own id (a unique string extracted from the database). A user clicks on a div. I get the id, and change the color of this div (in gets highlighted). Code: $('.selectable').livequery('click',function(){
var id;
id = $(this).attr('id');
//change color based on id.
});
Now comes the problem. Once a user clicks again on a div, if it wasn't highlighted, it should return to its original color. If it had been highlighted, and had returned to its original color due to a second click, it should get highlighted again. How would you do that? I wish I could post some code, but at this point, it would be rubbish. Thanks in advance. Regards, -jj. Currently i have rollover images when click on active a hide show div tag with the css property. the problem is that i want to keep the buttons on active state till someone clicks on another button then the button returns to a down state and the new button that was click on stay up. Code: <script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4', 'a5','a6');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
please help I am trying to make a simple alert come up stating a checkbox is checked when it changes, and then another alert for when the checkbox is unchecked. Problem is, only the alert for when the box is checked is coming up. Anyone know why? Code: function displayCheckPopUp()
{
if(document.activeElement.checked=true)
{
alert("A check box has been selected");
}
else if(document.activeElement.checked=false)<!--if(document.getElementById().checked=false)-->
{
alert("****");
}
}
Code: <input type="checkbox" name="Checkbox 1" value="Checkbox 1" id="first_cbox" onchange="displayCheckPopUp(this)" /> <p class="custom_style2"> Checkbox 1 </p> |
|||||||