Jump to content

autofill suggestions from with two autofill elements - only one element works

ScrewLooseSalad

By ScrewLooseSalad
in Javascript Help

 Share
Go to solution Solved by Psycho,

Recommended Posts

ScrewLooseSalad Member

ScrewLooseSalad

Posted
Posted

 I'm trying to get to grips with javascript, while conjuring up a form with suggestions built in; the form has two parts that autofill, the second part (var availableTags) of the script works fine, but the first part (var availableCust) doesn't, can anyone point out where I may have gone wrong? Thanks

 

code:

  <script>
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {
    var availableCust = [
	<?php
	
	$sql = "SELECT * FROM `companyuser`.`customerDetails` ORDER BY  `customerDetails`.`Account_Name` ASC ";
	$result = mysql_query($sql);
	while ($row = mysql_fetch_assoc($result))
	{
		$value2 = $row['Address1'];
		$value1 = $row['Account_Name'];
		echo "'$value1 - $value2',\n";
	}
	echo "'other'\n";
	
	?>
    ];
    $( '#recipient'  ).autocomplete({  source: availableCust  });
  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {
    var availableTags = [
	<?php
	
	$sql = "SELECT * FROM `fullstocklist`";
	$result = mysql_query($sql);
	while ($row = mysql_fetch_assoc($result))
	{
		$value4 = $row['Part_Name'];
		$value3 = $row['company_PartNo'];
		echo "'$value3 - $value4',\n";
	}
	echo "'other'\n";
	
	?>
    ];
    $( '#tags1'  ).autocomplete({  source: availableTags  });
    $( '#tags2'  ).autocomplete({  source: availableTags  });
    $( '#tags3'  ).autocomplete({  source: availableTags  });
    $( '#tags4'  ).autocomplete({  source: availableTags  });
    $( '#tags5'  ).autocomplete({  source: availableTags  });
    $( '#tags6'  ).autocomplete({  source: availableTags  });
    $( '#tags7'  ).autocomplete({  source: availableTags  });
    $( '#tags8'  ).autocomplete({  source: availableTags  });
    $( '#tags9'  ).autocomplete({  source: availableTags  });
    $( '#tags10' ).autocomplete({  source: availableTags  });
    $( '#tags11' ).autocomplete({  source: availableTags  });
    $( '#tags12' ).autocomplete({  source: availableTags  });

  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  </script>
ScrewLooseSalad Member

ScrewLooseSalad

Posted
  • Author
Posted

If you post the output of your form it will be easier to debug, but does your Address1 or Account_Name has an single quotes, line breaks or other characters that might break out your syntax?

 

 There are no single quotes or anything that should break out the syntax, these are all mysql databases used in other apps I've written that all work fine over there.

What do you mean 'post the output of your form'? What do you want me to post?

Psycho Prolific Member

Psycho

Posted
Posted (edited)

In the script you posted, you have multiple lines such as these:

$( '#tags1' ).autocomplete({ source: availableTags });
$( '#tags2' ).autocomplete({ source: availableTags });
$( '#tags3' ).autocomplete({ source: availableTags });

But, I don't see any similar lines for the availableCust values. That is needed to apply the autocomplete functionality to a field

 

EDIT: Never mind, I just saw you had this

$( '#recipient' ).autocomplete({ source: availableCust });

But, you should double check the spelling of all the references.

Edited by Psycho
ScrewLooseSalad Member

ScrewLooseSalad

Posted
  • Author
Posted

view source of the page and copy the javascript code in here.

 

when I view the source in my browser I get something like this:

//........................

  <link rel='stylesheet' href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' />
  <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
  <link rel='stylesheet' href='/resources/demos/style.css' />
  <script>
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {

    var availableCust = [

'contact1 - address1',
'contact2 - address2',
'contact3 - address3',
//....etc

    ];
    $( '#recipient'  ).autocomplete({  source: availableCust  });
  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  $(function() {
    var availableTags = [
	
'code1 - part1',
'code2 - part2',
'code3 - part3'
//....etc

    ];
    $( '#tags1'  ).autocomplete({  source: availableTags  });
    $( '#tags2'  ).autocomplete({  source: availableTags  });
    $( '#tags3'  ).autocomplete({  source: availableTags  });
    $( '#tags4'  ).autocomplete({  source: availableTags  });
    $( '#tags5'  ).autocomplete({  source: availableTags  });
    $( '#tags6'  ).autocomplete({  source: availableTags  });
    $( '#tags7'  ).autocomplete({  source: availableTags  });
    $( '#tags8'  ).autocomplete({  source: availableTags  });
    $( '#tags9'  ).autocomplete({  source: availableTags  });
    $( '#tags10' ).autocomplete({  source: availableTags  });
    $( '#tags11' ).autocomplete({  source: availableTags  });
    $( '#tags12' ).autocomplete({  source: availableTags  });

  });
    ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  </script>
<style>
//....
</style>


<div id='editableform'>
 <!-- panel one - top left - delivery information -->
 <div id='topleftpan'>
   <table class='letabl'>
     <tr>	   <td>Deliver To:</td>	   <td><input id='' size='40' id='recipient' value='recipient'/></td>	 </tr>
     <tr>	   <td rowspan='6' style='vertical-align:text-top;'>Address:</td>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td><input id='' size='40' /></td>	 </tr>
     <tr>	   <td>Contact</td>	   <td><input id='' size='40' /></td>	 </tr>
   </table>
 </div>
 
 <!-- panel two - top right - address information -->
 <div id='toprightpan'>
   <table class='letabl2'>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Deliver To:</td>	   <td><input id='' size='40'/></td>	 </tr>
	 <tr  style='height:32px;'>		</tr>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Date:</td>	   <td><input id='' size='40'/></td>	 </tr>
	 <tr  style='height:32px;'>		</tr>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Order No:</td>	   <td><input id='' size='40'/></td>	 </tr>
	 <tr  style='height:32px;'>		</tr>
     <tr bgcolor="#EDEDED" style='border: 2px solid Gray;'>	   <td>Telephone:</td>	   <td><input id='' size='40'/></td>	 </tr>
   </table>
   <input type="submit" name="clear1" value="Clear" style="margin-top:10px; float:right;">
 </div>

 <!-- panel three - bottom - package content information -->
 <div id='bottompan'>
   <table class='letabl'>
     <tr align=center>
	   <td>Item no</td>
	   <td colspan='2'>Item Description</td>
	   <td>Quantity</td>
	 </tr>
     
     <tr align=center>
	   <td>1</td>
	   <td><input name='itemIden1' size='55' id='tags1' /></td>
	   <td><input name='itemDesc1' size='55'/></td>
	   <td><input name='quantity1' size='6'/></td>
	 </tr>
	 
     <tr align=center>
	   <td>2</td>
	   <td><input name='itemIden2' size='55' id='tags2' /></td>
	   <td><input name='itemDesc2' size='55'/></td>
	   <td><input name='quantity2' size='6'/></td>
	 </tr>
	 
     <tr align=center>
	   <td>3</td>
	   <td><input name='itemIden3' size='55' id='tags3' /></td>
	   <td><input name='itemDesc3' size='55'/></td>
	   <td><input name='quantity3' size='6'/></td>
	 </tr>
	 
//etc.................
ScrewLooseSalad Member

ScrewLooseSalad

Posted
  • Author
Posted

 

Could it be because you have TWO id references in the relevant input tag? The first one is empty.

<input id='' size='40' id='recipient' value='recipient'/>

 

 That was exactly it! How did I overlook that?!

Thankyou so much!

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.