?
Solved

AutoComplete a List Menu with DataBase driven results

Posted on 2006-05-08
8
Medium Priority
?
300 Views
Last Modified: 2012-05-05
Hello everyone...

I've been assigned a task to create a autocomplete text field.  I'm thinking that the people that asked me to do this are wanting the auto-complete fuctionality of something like a data access page in MS Access.  

I don't see it working out that way unless one of you know that it can be done...I see it as me creating a text field and having a select box next to it and have the information as it is entered into the text field popluate the available options in the list menu.  Then when the user sees what they would like in the list menu they can click on it and get the link that they want.

Here's a little code below of what I'm thinking about.

Thanks a bunch in advance.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body bgcolor="#8CB4FD">
<table width="463" border="2" cellspacing="0" cellpadding="2">
  <tr>
    <td width="104">&nbsp;</td>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td><strong>Decription</strong></td>
    <td width="153"><input name="textfield" type="text" value="Inputted AutoCompleteText Field" size="25" maxlength="25" /></td>
    <td width="12">&nbsp;</td>
    <td width="166">
      
      <select name="description" size="5" class="calendarText" multiple="multiple">
          <cfoutput query="midata">
            <option value="#dd3#">#dd3#</option>
        </cfoutput>
      </select>
  </table>
</body>
</html>
0
Comment
Question by:inverted_2000
  • 4
  • 3
8 Comments
 
LVL 2

Author Comment

by:inverted_2000
ID: 16630901
Also...here is a good example using AJax and ColdFusion 7:
http://www.techfeed.net/cfQuickDocs/

My problem is that I'm on CF5 and it doen't support the tags that were used to create that example.  But if I could have that type of functionality populate my list menu...I would be in business.

0
 
LVL 11

Expert Comment

by:mvan01
ID: 16630930
Some work on a JavaScript searchable dropdown was done here:
http:Q_20054666.html

Maybe check that out.

Peace and joy.  mvan
0
 
LVL 19

Expert Comment

by:dakyd
ID: 16631188
Hm, that's an interesting way of solving the problem.  I'd suggest another route, though - to actually show/hide the available options rather than changing which options are selected.  Here's a sample script that'll do it, it only matches if the text in the textbox appears at the beginning of the option's text (i.e. if you type in "og", it won't match "dog").  The only thing you'd have to change would be the list of options in the drop down.  Hope that helps.

<html>
<head>
<script type="text/javascript">
var arrOpts = new Array();

window.onload = function()
{
  getOpts(document.getElementById("sel"));
};

function getOpts(selObj)
{
  for (var i = 0, n = selObj.options.length; i < n; i ++)
    arrOpts[i] = selObj.options[i].text + "||" + selObj.options[i].value;
}

function setOpts(val, selObj)
{
  selObj.options.length = 0;
  for (var i = 0, n = arrOpts.length; i < n; i ++)
  {
    var currPair = arrOpts[i].split("||");
    if (currPair[0].indexOf(val) == 0)
      selObj.options[selObj.options.length] = new Option(currPair[0], currPair[1]);
  }
}
</script>
</head>

<body>
<form>
  <input type="text" name="inputFld" onkeyup="setOpts(this.value, this.form.sel);" />
  <select name="sel" id="sel">
    <option value="aardvark">aardvark</option>
    <option value="ant">ant</option>
    <option value="bat">bat</option>
    <option value="bee">bee</option>
    <option value="cat">cat</option>
    <option value="cow">cow</option>
    <option value="deer">deer</option>
    <option value="dog">dog</option>
  </select>
</form>
</body>
</html>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Author Comment

by:inverted_2000
ID: 16631225
I'm liking your post dakyd...let me play with it for an hour....brb
0
 
LVL 2

Author Comment

by:inverted_2000
ID: 16631270
I love it...but it's case sensitive???
Can the case issue be eaisly changed?
This is my version with a ColdFusion Query populating the menu.

<CFQUERY NAME="midata" DATASOURCE="midata">
SELECT DD3
FROM `Sheet1$`

</CFQUERY>
<html>
<head>
<script type="text/javascript">
var arrOpts = new Array();

window.onload = function()
{
  getOpts(document.getElementById("sel"));
};

function getOpts(selObj)
{
  for (var i = 0, n = selObj.options.length; i < n; i ++)
    arrOpts[i] = selObj.options[i].text + "||" + selObj.options[i].value;
}

function setOpts(val, selObj)
{
  selObj.options.length = 0;
  for (var i = 0, n = arrOpts.length; i < n; i ++)
  {
    var currPair = arrOpts[i].split("||");
    if (currPair[0].indexOf(val) == 0)
      selObj.options[selObj.options.length] = new Option(currPair[0], currPair[1]);
  }
}
</script>
</head>

<body>
<form>
  <input type="text" name="inputFld" onkeyup="setOpts(this.value, this.form.sel);" />
 <select name="sel" id="sel" size="5" class="calendarText" multiple="multiple">
    <cfoutput query="midata">
            <option value="#dd3#">#dd3#</option>
        </cfoutput>
  </select>
</form>
</body>
</html>
0
 
LVL 19

Accepted Solution

by:
dakyd earned 2000 total points
ID: 16631517
Oops, hadn't thought about that.  Fixing the case sensitivity isn't hard, though.  Here's an updated version (I think I got the cftags properly, but I don't have Cold Fusion, so if there's a typo there I can't test):

<html>
<head>
<script type="text/javascript">
var arrOpts = new Array();

window.onload = function()
{
  getOpts(document.getElementById("sel"));
};

function getOpts(selObj)
{
  for (var i = 0, n = selObj.options.length; i < n; i ++)
    arrOpts[i] = selObj.options[i].text + "||" + selObj.options[i].value;
}

function setOpts(val, selObj)
{
  selObj.options.length = 0;
  for (var i = 0, n = arrOpts.length; i < n; i ++)
  {
    var currPair = arrOpts[i].split("||");
    if (currPair[0].toUpperCase().indexOf(val.toUpperCase()) == 0)
      selObj.options[selObj.options.length] = new Option(currPair[0], currPair[1]);
  }
}
</script>
</head>

<body>
<form>
  <input type="text" name="inputFld" onkeyup="setOpts(this.value, this.form.sel);" />
  <select name="sel" id="sel" size="5" class="calendarText" multiple="multiple" >
    <cfoutput query="midata">
            <option value="#dd3#">#dd3#</option>
        </cfoutput>
  </select>
</form>
</body>
</html>
0
 
LVL 2

Author Comment

by:inverted_2000
ID: 16631570
That is freaking P.E.R.F.E.C.T

You a rockstar in my book dakyd...

Thanks a ton (o:
0
 
LVL 19

Expert Comment

by:dakyd
ID: 16631879
No sweat, glad to hear it helped.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question