Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

wildcard search 1

Status
Not open for further replies.
MikePalm

MikePalm

Programmer
Feb 6, 2002
34
US
I have a selection list that I display for users. THere is a field that I allow users to type in information and using java script I take them to the closest match in the list using the substring feature.
I would like to do the same tthing using a wildcard. The field contains addresses that look like

1234 smith street

I would like to let the users enter the street name and find the entry. currently they have to know the address number.

below is the javascript i am using to take the user to the closest match.

Code: 
for (var i = 0; i < listlength; i++){
		var lname = f.Names.options[i].text.substr(0,searchlength)
		if (lname.toUpperCase() == str.toUpperCase()){
			f.Names.focus();
			var index_6 = i + 6;
			if (index_6 >= listlength)
				index_6 = listlength - 7;
			if (index_6 < 0) break;
			f.Names.options[index_6].selected = true;
			f.Names.options[index_6].selected = false;
			f.Names.options[i].selected = true;
			f.name_search.focus();
			break;
		}
	}

any suggestions would be appreciated.
 
Sort by date Sort by votes
here's something i concocted recently:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript"><!--

var optArray = new Array('apple','abraham','another','atrophy','belly','button','barter','calipur','calling','cold','danish','dainty','devil','eavesdrop','evil','foreward','foreground','fable','green','great');

function filter() {

    var l, opt;

    // get the form
    var f = document.forms['f'];

    // get the entered text string
    var strFilter = f.elements['t'].value.toLowerCase();

    // get a handle on the select's options
    var selOptions = f.elements['o'].options;

    // clear options
    selOptions.length = 0;

    //loop through options list
    for (var i = 0; i < optArray.length; i++) {

        // get the current list item
        l = optArray[i].toLowerCase();

        //if option has search val, add it to select
        if (l.indexOf( strFilter ) > -1) {
            opt = new Option(optArray[i], optArray[i]);
            selOptions.add(opt);
        }
    }
}

-->
</script>

<style type="text/css">

</style>

</head>

<body onload="filter();">

<form name="f">
  <input type="text" name="t" value="" onkeyup="filter();" />
  <br />
  <select name="o" multiple></select>
</form>

</body>

</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
The only problem is that I do not have any idea what the street names will be ahead of time. So prepopulating an array with a list of possible names will not work.

Also I want the list to filter as they type, not after they have entered the complete street name.
 
Upvote 0 Downvote
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript"><!--

var optArray = new Array();

function loadArray() {
    var theSelOpts = document.forms['f'].elements['o'].options;
    for ( var i = 0; i < theSelOpts.length; i++ ) {
        optArray[i] = theSelOpts[i].value;
    }
}

function filter() {

    var l, opt;

    // get the form
    var f = document.forms['f'];

    // get the entered text string
    var strFilter = f.elements['t'].value.toLowerCase();

    // get a handle on the select's options
    var selOptions = f.elements['o'].options;

    // clear options
    selOptions.length = 0;

    //loop through options list
    for (var i = 0; i < optArray.length; i++) {

        // get the current list item
        l = optArray[i].toLowerCase();

        //if option has search val, add it to select
        if (l.indexOf( strFilter ) > -1) {
            opt = new Option(optArray[i], optArray[i]);
            selOptions.add(opt);
        }
    }
}

-->
</script>

</head>

<body onload="loadArray(); filter();">
<form name="f">
  <input autocomplete="off" type="text" style="width: 150px;" name="t" value="" onkeyup="filter();" />
  <br />
  <select name="o" multiple style="width: 150px; height: 200px;">
    <option value="123 Fourth Street">123 Fourth Street</option>
    <option value="234 Fifth Street">234 Fifth Street</option>
    <option value="345 Sixth Street">345 Sixth Street</option>
    <option value="456 Seventh Street">456 Seventh Street</option>
  </select>
</form>
</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
cLflaVA,

Thanks for the code. It works as you stated. I apprieciate you taking the time to create a test application.

My only concern with your approach is with the loading of the array. Some of the data that is pulled up in the list is quite lengthy and I worry about the amount of time required before the screen will load?
 
Upvote 0 Downvote
Also, I do not want to clear the selections box, only scroll and highlight the record that closely matches what they typed in.
 
Upvote 0 Downvote
since i have nothing better to do than provide solutions for people

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript"><!--

function makeSelection( filter, targ ) {
    var theOpts = targ.options;
    filter = filter.toLowerCase();
    for ( var i = 0; i < theOpts.length; i++ ) {
        if ( theOpts[i].value.toLowerCase().indexOf( filter ) > -1 ) {
            targ.selectedIndex = i;
            break;
        }
    }
}

-->
</script>

</head>

<body>
<form name="f">
  <input autocomplete="off" type="text" style="width: 150px;" name="t" value="" onkeyup="makeSelection(this.value, this.form.o);" />
  <br />
  <select name="o" style="width: 150px; height: 200px;" size="10">
    <option value="123 Fourth Street">123 Fourth Street</option>
    <option value="234 Fifth Street">234 Fifth Street</option>
    <option value="345 Sixth Street">345 Sixth Street</option>
    <option value="456 Seventh Street">456 Seventh Street</option>
  </select>
</form>
</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote

Mike,

You appear to be adding functionality with each post. It is far easier for people to help if they know most of the facts up-front. If there are any more unknown quantities in the specifications for your project, you might be better off stating them all now, rather than piecemeal.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Actually Dan, I was not adding functionality. I was responding to the posts by Clflava. He was providing a solution that I thought would not work for my specific situation.

Mike
 
Upvote 0 Downvote
it is not the intent of this forum to "provide solutions" by any means. rather, it is a forum where people like you can ask questions for people like BillyRayPreachersSon to answer.

you asked a question, i answered it. you asked another, i answered it. you asked a third, i answered it. instead of wasting peoples time, it would be a much more streamlined process if you were to describe exactly what you need help with from the get-go, rather than getting a perfectly legitimate answer, just to say that it's "not what you're looking for".

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
My intent here is not to waste anyones time.

I thought I had explained exactly what I was looking for in the way of an answer.

I will try to do a better job of explaing the situation in the future, so that no ones time is wasted.

Thanks for all the help.

Mike
 
Upvote 0 Downvote
Yes it was, I just gave you a star.

Again thanks for all of your help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
76
TheLazyPig
TheLazyPig
Dawnit
  • Locked
  • Question
Problem Sorting Search Engine Results
Replies
2
Views
67
Dawnit
Dawnit
Enkrypted
  • Locked
  • Question
Autocomplete and Search issues
Replies
7
Views
156
jpadie
jpadie
JBorges
  • Locked
  • Question
Find Search Occurrences That Includes Special Characters
Replies
1
Views
43
jpadie
jpadie
JBorges
  • Locked
  • Question
Find Next Occurrence in Search
Replies
5
Views
68
jpadie
jpadie

Part and Inventory Search

Sponsor

Back
Top