Autocomplete a field

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Autocomplete a field

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> General Web Development >> Autocomplete a field

Page: [1]


mattps Posts: 45 Joined: 6/12/2004 Status: offline	Autocomplete a field - 10/4/2005 2:34:24 Does any one know how to autocomplete a field from a DB? I've got a text box and when I type in the text box I want it check what's in a field of the DB and autocomplete the textbox if it finds a match. Cheers, Matt


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	RE: Autocomplete a field - 10/4/2005 8:00:13 How large of a list will you be checking? I know of JavaScripts that will narrow a list of entries as you type but you should load the full list when the page initially loads. Here is an example of a JavaScript that does just that: http://javascript.internet.com/forms/list-chooser.html If you're looking for an ASP solution that is constantly checking the database, that would be a lot of 'round trips' to the server and is not recommended. Hope it helps. _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to mattps)


mattps Posts: 45 Joined: 6/12/2004 Status: offline	RE: Autocomplete a field - 10/4/2005 9:23:23 Thanks for that, jsut what I am looking for. I am implementing the list to try and cut down on variations of similar entries and to provide a shortcut when entering the same strings. (in reply to rdouglass)


mattps Posts: 45 Joined: 6/12/2004 Status: offline	RE: Autocomplete a field - 10/5/2005 6:38:36 I have looked at this but am trying to populate the combo box with entries from a SQL DB. I am trying to specify the option values using the following code: <option value="<%FP_FieldVal(fp_rs,"DeviceName")%>"><%FP_FieldVal(fp_rs,"DeviceName")%> But get the following error when I browse the page: Microsoft VBScript compilation error '800a0414' Cannot use parentheses when calling a Sub /inventory/autolookuptest.asp, line 112 FP_FieldVal(fp_rs,"DeviceName") -------------------------------^ Any clues? (in reply to mattps)


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	RE: Autocomplete a field - 10/5/2005 8:56:04 Can you post the code you're trying? _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to mattps)


jeepless Posts: 227 Joined: 12/20/2003 From: Smack in the middle of USA Status: offline	RE: Autocomplete a field - 10/5/2005 11:09:03 quote: <option value="<%FP_FieldVal(fp_rs,"DeviceName")%>"><%FP_FieldVal(fp_rs,"DeviceName")%> Shouldn't your code be: <option value="<%=FP_FieldVal(fp_rs,"DeviceName")%>"><%=FP_FieldVal(fp_rs,"DeviceName")%> (Note the addition of the equal signs) I've run into this before and I believe it was because I also neglected to include the equal signs. _____________________________ The problem with designing a system that's foolproof is that designers underestimate complete fools. (in reply to rdouglass)

mattps

Posts: 45
Joined: 6/12/2004
Status: offline

RE: Autocomplete a field - 10/6/2005 2:34:15

Here is the code:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Anand Raman (anand_raman@poboxes.com) -->
<!-- Web Site:  http://www.angelfire.com/ar/diduknow -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function SelObj(formname,selname,textname,str) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.bldUpdate = bldUpdate;
}

function initialize() {
if (this.select_str =='') {
for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) {
this.selectArr = document.forms[this.formname][this.selname].options;
this.select_str += document.forms[this.formname][this.selname].options.value+":"+
document.forms[this.formname][this.selname].options.text+",";
   }
}
else {
var tempArr = this.select_str.split(',');
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr.split(':');
this.selectArr = new Option(prop[1],prop[0]);
   }
}
return;
}
function bldInitial() {
this.initialize();
for(var i=0;i<this.selectArr.length;i++)
document.forms[this.formname][this.selname].options = this.selectArr;
document.forms[this.formname][this.selname].options.length = this.selectArr.length;
return;
}

function bldUpdate() {
var str = document.forms[this.formname][this.textname].value.replace('^\\s*','');
if(str == '') {this.bldInitial();return;}
this.initialize();
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.selectArr.length;i++)
if(pattern1.test(this.selectArr.text)) 
document.forms[this.formname][this.selname].options[j++] = this.selectArr;
document.forms[this.formname][this.selname].options.length = j;
if(j==1){
document.forms[this.formname][this.selname].options[0].selected = true;
//document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text;
   }
}
function setUp() {
obj1 = new SelObj('menuform','itemlist','entry');
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in
obj1.bldInitial(); 
}
//  End -->
</script>
</HEAD>
<BODY OnLoad="javascript:setUp()">

<body>
<center>
<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">

<font face="arial, helvetica" size="-1">Please enter the first few letters of the item you are looking for.</font>
<br><br>
<table width="100%" border="1">
  <thead>
  </thead>
  <tbody>
 
<%
fp_sQry="select distinct devicename from ""Berksnet asset inventory"""
fp_sDefault="TDeviceName=&TServerStatus=&TProductType=&TProductName=&TSerialNo=&TAssetTag=&TOS=&TRole=&TMACAddress=&TAppServices=&TCPUType=&TCPUNo=&TDisk1Config=&TDisk2Config=&TDisk3Config=&TNoOfDisks=&TDisk1Size=&TDisk2Size=&TDisk3Size=&TDisk4Size=&TDisk5Size=&TDisk6Size=&TDisk7Size=&TDisk8Size=&TNoOfSpareSlots=&TDriveArray=&TRAM=&TRAMSpareSlotos=&TSiteLocation=&TStreet=&TTown=&TPostcode=&TSiteContact=&TContactTelNo=&TUPSRole=&TUPSManagedBy=&TUPSMake=&TUPSModel=&TUPSSerial=&TUPSAsset=&TWarrantyType=&TServicesDescription=&TCarePackID=&TWarrantyEndDate=&TDoP=&TRegDate=&TAttachedDevices=&T1stDevice Make=&1stTDevice Model=&T1stDevice Asset=&T1stDevice Serial=&TAttached2ndDevice=&T12ndDeviceMake=&T2ndDeviceModel=&T2ndDeviceSerial=&T2ndDeviceAsset=&TBackupSoftware=&TBackupVersion=&TBackupRole=&TAVSoftware=&TAVVersion=&TiLOKey=&TDeviceName="
fp_sNoRecords="<tr><td colspan=16 align=left width=""100%"">No records returned.</td></tr>"
fp_sDataConn="Inventory"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=True
fp_fMenuFormat=False
fp_sMenuChoice=""
fp_sMenuValue=""
fp_sColTypes="&"
fp_iDisplayCols=16
fp_fCustomQuery=True
BOTID=0
fp_iRegion=BOTID
%>

</tbody>
</table><input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>
<option value="<%FP_FieldVal(fp_rs,"DeviceName")%>"><%FP_FieldVal(fp_rs,"DeviceName")%>
</option>

</select>
</form>
</center>

<p><center>
</center><p>

</body>

If I use:

<option value="<%FP_FieldVal(fp_rs,"DeviceName")%>"><%FP_FieldVal(fp_rs,"DeviceName")%>

I get the above error, however if I use:

<option value="<%FP_FieldVal(fp_rs,"DeviceName")%>"><%FP_FieldVal(fp_rs,"DeviceName")%>

I get a different error:

Microsoft VBScript runtime error '800a000d' Type mismatch: 'FP_FieldVal' at line 108

(in reply to jeepless)


Spooky Posts: 26618 Joined: 11/11/1998 From: Middle Earth Status: offline	RE: Autocomplete a field - 10/6/2005 2:49:10 You habvent used the "=" sign yet? _____________________________ If you arent part of the solution, then there is good money to be made prolonging the problem ��k� Database / DRW help Check out the Tutorials for Frontpage Databases Forum FAQ' s Developers Edition Spooky Login User Registration and Management tool Personalized Frontpage Hosting (in reply to mattps)


mattps Posts: 45 Joined: 6/12/2004 Status: offline	RE: Autocomplete a field - 10/6/2005 7:25:15 Sorry, the second example should have included the "=" sign - copy and paste error. (in reply to Spooky)


Spooky Posts: 26618 Joined: 11/11/1998 From: Middle Earth Status: offline	RE: Autocomplete a field - 10/6/2005 14:38:00 Youll need to check the DRW code again - I dont see the required include files that actually process the asp for you? _____________________________ If you arent part of the solution, then there is good money to be made prolonging the problem ��k� Database / DRW help Check out the Tutorials for Frontpage Databases Forum FAQ' s Developers Edition Spooky Login User Registration and Management tool Personalized Frontpage Hosting (in reply to mattps)

mattps

Posts: 45
Joined: 6/12/2004
Status: offline

RE: Autocomplete a field - 10/7/2005 2:05:18

I removed all the DRW code and used the wizard to generate the code:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Anand Raman (anand_raman@poboxes.com) -->
<!-- Web Site:  http://www.angelfire.com/ar/diduknow -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function SelObj(formname,selname,textname,str) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.bldUpdate = bldUpdate;
}

function initialize() {
if (this.select_str =='') {
for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) {
this.selectArr = document.forms[this.formname][this.selname].options;
this.select_str += document.forms[this.formname][this.selname].options.value+":"+
document.forms[this.formname][this.selname].options.text+",";
   }
}
else {
var tempArr = this.select_str.split(',');
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr.split(':');
this.selectArr = new Option(prop[1],prop[0]);
   }
}
return;
}
function bldInitial() {
this.initialize();
for(var i=0;i<this.selectArr.length;i++)
document.forms[this.formname][this.selname].options = this.selectArr;
document.forms[this.formname][this.selname].options.length = this.selectArr.length;
return;
}

function bldUpdate() {
var str = document.forms[this.formname][this.textname].value.replace('^\\s*','');
if(str == '') {this.bldInitial();return;}
this.initialize();
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.selectArr.length;i++)
if(pattern1.test(this.selectArr.text)) 
document.forms[this.formname][this.selname].options[j++] = this.selectArr;
document.forms[this.formname][this.selname].options.length = j;
if(j==1){
document.forms[this.formname][this.selname].options[0].selected = true;
//document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text;
   }
}
function setUp() {
obj1 = new SelObj('menuform','itemlist','entry');
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in
obj1.bldInitial(); 
}
//  End -->
</script>
</HEAD>
<BODY OnLoad="javascript:setUp()">

<body>
<center>
<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">

<font face="arial, helvetica" size="-1">Please enter the first few letters of the item you are looking for.</font>
<table width="100%" border="1">
  <thead>
    <tr>
      <td><b>DeviceName</b></td>
    </tr>
  </thead>
  <tbody>
    <!--webbot bot="DatabaseRegionStart" s-columnnames="DeviceName" s-columntypes="200" s-dataconnection="Inventory" b-tableformat="TRUE" b-menuformat="FALSE" s-menuchoice s-menuvalue b-tableborder="TRUE" b-tableexpand="TRUE" b-tableheader="TRUE" b-listlabels="TRUE" b-listseparator="TRUE" i-listformat="0" b-makeform="TRUE" s-recordsource s-displaycolumns="DeviceName" s-criteria s-order s-sql="SELECT Distinct DeviceName FROM "Berksnet Asset Inventory"" b-procedure="FALSE" clientside suggestedext="asp" s-defaultfields s-norecordsfound="No records returned." i-maxrecords="256" i-groupsize="0" botid="0" u-dblib="_fpclass/fpdblib.inc" u-dbrgn1="_fpclass/fpdbrgn1.inc" u-dbrgn2="_fpclass/fpdbrgn2.inc" tag="TBODY" preview="<tr><td colspan=64 bgcolor="#FFFF00" align="left" width="100%"><font color="#000000">This is the start of a Database Results region. The page must be fetched from a web server with a web browser to display correctly; the current web is stored on your local disk or network.</font></td></tr>" startspan --><!--#include file="_fpclass/fpdblib.inc"-->
<% if 0 then %>
<SCRIPT Language="JavaScript">
document.write("<div style='background: yellow; color: black;'>The Database Results component on this page is unable to display database content. The page must have a filename ending in '.asp', and the web must be hosted on a server that supports Active Server Pages.</div>");
</SCRIPT>
<% end if %>
<%
fp_sQry="SELECT Distinct DeviceName FROM ""Berksnet Asset Inventory"""
fp_sDefault=""
fp_sNoRecords="<tr><td colspan=1 align=left width=""100%"">No records returned.</td></tr>"
fp_sDataConn="Inventory"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=True
fp_fMenuFormat=False
fp_sMenuChoice=""
fp_sMenuValue=""
fp_iDisplayCols=1
fp_fCustomQuery=True
BOTID=0
fp_iRegion=BOTID
%>
<!--#include file="_fpclass/fpdbrgn1.inc"-->
<!--webbot bot="DatabaseRegionStart" endspan i-checksum="26559" --><tr>
      <td>
      <!--webbot bot="DatabaseResultColumn" s-columnnames="DeviceName" s-column="DeviceName" b-tableformat="TRUE" b-hashtml="FALSE" b-makelink="FALSE" clientside b-MenuFormat preview="<font size="-1">&lt;&lt;</font>DeviceName<font size="-1">&gt;&gt;</font>" startspan --><%=FP_FieldVal(fp_rs,"DeviceName")%><!--webbot bot="DatabaseResultColumn" endspan i-checksum="26969" --></td>
    </tr>
    <!--webbot bot="DatabaseRegionEnd" b-tableformat="TRUE" b-menuformat="FALSE" u-dbrgn2="_fpclass/fpdbrgn2.inc" i-groupsize="0" clientside tag="TBODY" preview="<tr><td colspan=64 bgcolor="#FFFF00" align="left" width="100%"><font color="#000000">This is the end of a Database Results region.</font></td></tr>" startspan --><!--#include file="_fpclass/fpdbrgn2.inc"-->
<!--webbot bot="DatabaseRegionEnd" endspan i-checksum="62730" --></tbody>
</table>
<p> </p>
<p><input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>
<option value="<%=FP_FieldVal(fp_rs,"DeviceName")%>"><%=FP_FieldVal(fp_rs,"DeviceName")%>
</option>

</select> </p>
</form>
</center>

<p><center>
</center><p>

</body>

But I still get the same error messages.

(in reply to Spooky)

rdouglass

Posts: 9280
From: Biddeford, ME USA
Status: offline

RE: Autocomplete a field - 10/7/2005 9:44:19

One major problem you hve is that your <option> tags are not inside your DRW. Try this:

Save a copy of this page.

Replace *everything* between the <form> and </form> tags with this:

<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">

<font face="arial, helvetica" size="-1">Please enter the first few letters of the item you are looking for.</font>
<table width="100%" border="1">
  <thead>
    <tr>
      <td><b>DeviceName</b></td>
<input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>

    <!--#include file="_fpclass/fpdblib.inc"-->
<% if 0 then %>
<SCRIPT Language="JavaScript">
document.write("<div style='background: yellow; color: black;'>The Database Results component on this page is unable to display database content. The page must have a filename ending in '.asp', and the web must be hosted on a server that supports Active Server Pages.</div>");
</SCRIPT>
<% end if %>
<%
fp_sQry="SELECT Distinct DeviceName FROM ""Berksnet Asset Inventory"""
fp_sDefault=""
fp_sNoRecords="<tr><td colspan=1 align=left width=""100%"">No records returned.</td></tr>"
fp_sDataConn="Inventory"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=True
fp_fMenuFormat=False
fp_sMenuChoice=""
fp_sMenuValue=""
fp_iDisplayCols=1
fp_fCustomQuery=True
BOTID=0
fp_iRegion=BOTID
%>
<!--#include file="_fpclass/fpdbrgn1.inc"-->
<option value="<%=FP_FieldVal(fp_rs,"DeviceName")%>"><%=FP_FieldVal(fp_rs,"DeviceName")%></option>
<!--#include file="_fpclass/fpdbrgn2.inc"-->

</select> </p>
</form>

What I did was to Diet your DRW and put the <select> and <option> elements in their proper place.

See, what we want to do basically is to write the <select> tag and then loop thru the optins and then close the select. What your code was doing is to loop thru the options then write the <select> open and close tags.

Another thing you need to be aware of is that this forum sometimes interprets JavaScript code into italics. Many times JavaScripts use [ i ] (remove the spaces) for looping and that is what this forum interprets as italics.

So be wary of copying and pasting JavaScript code that has italics in it - it shouldn't really be italics but rather a loop function.

So be sure you have the code in the <head> section exactly like what is at the original link and change the code between <form> and </form>.

That any better?

_____________________________

Don't take you're eye off your final destination.

ASP Checkbox Function Tutorial.

(in reply to mattps)


mattps Posts: 45 Joined: 6/12/2004 Status: offline	RE: Autocomplete a field - 10/7/2005 10:19:15 Thanks, nearly there. The option box is now populated correctly but when I type anything into the text box it does autocomplete and I get an excalmation mark in the bottom left of my IE page. The error is: Line: 48 Char: 1 Error: 'document.forms[...][...].value' is null or not an object Code: 0 (in reply to rdouglass)


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	RE: Autocomplete a field - 10/7/2005 10:23:18 quote: So be sure you have the code in the <head> section exactly like what is at the original link I think that may be your problem. Read what I wrote about the way this forum interprets JavaScript coding sometimes and then go back to the original link and grab the code that goes in the <head> section. _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to mattps)


mattps Posts: 45 Joined: 6/12/2004 Status: offline	RE: Autocomplete a field - 10/7/2005 10:41:23 Tried that twice, still no joy (in reply to rdouglass)