JavaScript - Finding The Id Of A Jquery Autocomplete Input From Within The Onitemselect Call

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 ?

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">
					&nbsp;
				</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 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

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

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?

Here 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 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">&nbsp;</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>&nbsp;&nbsp;# Guests&nbsp;<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>&nbsp;&nbsp;List details&nbsp;<input type="text" name="miscDetails" size="35" /></td>
				</tr>
				<tr style="height:2em"><td >&nbsp;</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.

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance