...

View Full Version : JavaScript? Predictive Text for Form Field Input?



MrTIMarshall
07-13-2012, 04:58 PM
Hello,

I am in the process of making a large, multi-step form and would like to implement predictive text on on or more text input fields.

Alike the Google and YouTube search engine, it will highlight the words and phrases like this:

Search box: lan
predictive text:

Lancaster
England
Finland
Scotland


The example above was for if the field was for example 'Where are you'.

I have tried researching, however, the outcomes are for a much larger search using databases, I just want to do a small predictive text for form field input.

Thank you for any help and/or advice in advanced.

Best Regards,
Tim

WolfShade
07-13-2012, 05:05 PM
Typically this would be done with a database, yes. I suppose you _could_ use a text file or xml file and get the same results, but the file would be HUGE. Better off using a database, IMHO.

MrTIMarshall
07-13-2012, 05:27 PM
Typically this would be done with a database, yes. I suppose you _could_ use a text file or xml file and get the same results, but the file would be HUGE. Better off using a database, IMHO.

The are only a maximum of 30 words for the predictive text to output, this would be a waste of a database.

There's surely a simple way to do this...

WolfShade
07-13-2012, 05:45 PM
Well, if there are only thirty words, then that's different.

Basically it would be set up the same way as if it were a database, just use the file as the "source" instead of a database. Put each word on a separate line and make an array out of it using the CRLF as the delimiter, then search the array with every keyUp and display the results.

MrTIMarshall
07-13-2012, 07:09 PM
Well, if there are only thirty words, then that's different.

Basically it would be set up the same way as if it were a database, just use the file as the "source" instead of a database. Put each word on a separate line and make an array out of it using the CRLF as the delimiter, then search the array with every keyUp and display the results.

I'm a newbie in JavaScript so if you have the time, could you please explain yourself a little more clearer?

My friend suggested this and I added the values in, however I do not kno whow to use this...


<script language="javascript">
var places = ["Dump","Auction","Waling round the city","Big Al\'s Gun Shop","Sally\'s Sweet Shop","TC Clothing","Bits /'n/' Bobs","Jewelry Shop","Torn Super Store","Cyber Force","Torn City Docks","Post Office","Pawn Shop","Mexico / Ciudad Juárez","Canada / Toronto","Cayman Islands - George Town","Hawaii - Honolulu","United Kingdom - London","Switzerland - Zurich","Argentina - Buenos Aires","Japan - Tokyo","China - Beijing","UAE \- Dubai","South Africa - Johannesburg"];
$('your select field here').keydown(function() {var sugg = [];
var reg = new RegExp($(this).val());
for (var i = 0; i < places.length; i++) {
if (reg.test(places[i])) sugg.push(places[i]);
}
if (sugg.length == 0) sugg.push('No matches found');
//do something with your sugg array here! put it into a dropdown somewhere... etc
});
</script>

Best Regards,
Tim

Old Pedant
07-13-2012, 10:21 PM
Well, Google cheats. The thing they use that *LOOKS* like it is a simple <input type="text"> box is not. It's actually a <span> or <div> that they style to look the same. It's the only way you can highlight WITHIN what the user typed in.

But if you don't need that...if it's okay if just the *suggestions* get the highlighting, then it's not too hard. That harder part comes in allowing people to choose one of the suggestions. Assuming that's what you want to allow. Again, Google cheats. If you are willing to simply show the list of suggestions, with your highlighting, and then allow the user to CLICK on one to select it, then it's pretty easy.

Is that sufficient?

Old Pedant
07-13-2012, 10:22 PM
Forgot to mention: And the CHEAT that Google uses requires a *TON* of JavaScript code. I've come close, but I haven't quite duplicated it yet. None of it is truly HARD code, but there has to be so much of it.

MrTIMarshall
07-13-2012, 11:05 PM
Well, Google cheats. The thing they use that *LOOKS* like it is a simple <input type="text"> box is not. It's actually a <span> or <div> that they style to look the same. It's the only way you can highlight WITHIN what the user typed in.

But if you don't need that...if it's okay if just the *suggestions* get the highlighting, then it's not too hard. That harder part comes in allowing people to choose one of the suggestions. Assuming that's what you want to allow. Again, Google cheats. If you are willing to simply show the list of suggestions, with your highlighting, and then allow the user to CLICK on one to select it, then it's pretty easy.

Is that sufficient?


Forgot to mention: And the CHEAT that Google uses requires a *TON* of JavaScript code. I've come close, but I haven't quite duplicated it yet. None of it is truly HARD code, but there has to be so much of it.

It doesn't have to highlight, I just thought it would be a simple thing to do, however I have been searching for the past few hours with no luck.

I just want something that is simple, looks okay and includes my words if they type in the text input field.

Thank you for your reply.

Best Regards,
Tim

Old Pedant
07-13-2012, 11:52 PM
Okay...here goes... Not sure it's exactly what you wanted, but ...

Try typing "L" first, then "A", and then "T". Then backspace and "N".

And then use the mouse to click on one of the choices.



<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.searchField {
width: 200px;
}
#results {
display: none;
position: absolute;
width: 200px;
background-color: lightyellow;
z-index: 10;
}
#results div {
position: absolute;
width: 200px;
height: 20px;
background-color: lightblue;
cursor: pointer;
}
#results div span {
color: red;
font-weight: bold;
}
</style>
<body>
<form id="theForm">
Search for: <input name="search" class="searchField"/>
</form>
Here is some text.<br/>
Here is some text.<br/>
Here is some text.<br/>
Here is some text.<br/>
Here is some text.<br/>

<div id="results"></div>

<script type="text/javascript">
(
function()
{

var lookFor = [
"Lancaster",
"England",
"Finland",
"Scotland",
"Brazil",
"Manila",
"Atlanta"
];

var form = document.getElementById("theForm");
var resultsDiv = document.getElementById("results");
var searchField = form.search;

// first, position the results:
var node = searchField;
var x = 0;
var y = 0;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
resultsDiv.style.left = x + "px";
resultsDiv.style.top = (y + 20) + "px";

// now, attach the keyup handler to the search field:
searchField.onkeyup = function()
{
var txt = this.value.toLowerCase();
if ( txt.length == 0 ) return;

var txtRE = new RegExp( "(" + txt + ")", "ig" );
// now...do we have any matches?
var top = 0;
for ( var s = 0; s < lookFor.length; ++s )
{
var srch = lookFor[s];
if ( srch.toLowerCase().indexOf(txt) >= 0 )
{
srch = srch.replace( txtRE, "<span>$1</span>" );
var div = document.createElement("div");
div.innerHTML = srch;
div.onclick = function() {
searchField.value = this.innerHTML.replace(/\<\/?span\>/ig,"");
resultsDiv.style.display = "none";
};
div.style.top = top + "px";
top += 20;
resultsDiv.appendChild(div);
resultsDiv.style.display = "block";
}
}
}
// and the keydown handler:
searchField.onkeydown = function()
{
while ( resultsDiv.firstChild != null )
{
resultsDiv.removeChild( resultsDiv.firstChild );
}
resultsDiv.style.display = "none";
}

}
)();
</script>
</body>
</html>

MrTIMarshall
07-13-2012, 11:57 PM
Okay...here goes... Not sure it's exactly what you wanted, but ...

Try typing "L" first, then "A", and then "T". Then backspace and "N".

And then use the mouse to click on one of the choices.




<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.searchField {
width: 200px;
}
#results {
display: none;
position: absolute;
width: 200px;
}
#results div {
position: absolute;
width: 200px;
height: 20px;
cursor: pointer;
}
#results div span {
color: red;
font-weight: bold;
}
</style>
<body>
<form id="theForm">
Search for: <input name="search" class="searchField"/>
</form>
<div id="results"></div>

<script type="text/javascript">
(
function()
{

var lookFor = [
"Lancaster",
"England",
"Finland",
"Scotland",
"Brazil",
"Manila",
"Atlanta"
];

var form = document.getElementById("theForm");
var resultsDiv = document.getElementById("results");
var searchField = form.search;

// first, position the results:
var node = searchField;
var x = 0;
var y = 0;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
resultsDiv.style.left = x + "px";
resultsDiv.style.top = (y + 20) + "px";

// now, attach the keyup handler to the search field:
searchField.onkeyup = function()
{
var txt = this.value.toLowerCase();
if ( txt.length == 0 ) return;

var txtRE = new RegExp( "(" + txt + ")", "ig" );
// now...do we have any matches?
var top = 0;
for ( var s = 0; s < lookFor.length; ++s )
{
var srch = lookFor[s];
if ( srch.toLowerCase().indexOf(txt) >= 0 )
{
srch = srch.replace( txtRE, "<span>$1</span>" );
var div = document.createElement("div");
div.innerHTML = srch;
div.onclick = function() {
searchField.value = this.innerHTML.replace(/\<\/?span\>/ig,"");
resultsDiv.style.display = "none";
};
div.style.top = top + "px";
top += 20;
resultsDiv.appendChild(div);
resultsDiv.style.display = "block";
}
}
}
// and the keydown handler:
searchField.onkeydown = function()
{
while ( resultsDiv.firstChild != null )
{
resultsDiv.removeChild( resultsDiv.firstChild );
}
resultsDiv.style.display = "none";
}

}
)();
</script>
</body>
</html>


Thank you very much! This is PERFECT!

I appreciate the time and effort you have put in to helping me.

Best Regards,
Tim

Old Pedant
07-14-2012, 12:01 AM
I just changed it a little bit. Needed to have a z-index and a background color to hide stuff that would be below the search box when the dropdown list appears.

MrTIMarshall
07-14-2012, 12:03 AM
You wouldn't happen to know how to turn off the browsers history on this field so there's not two boxes open at a time?

Best Regards,
Tim

Old Pedant
07-14-2012, 12:07 AM
<input name="search" class="searchField" autocomplete="off" />

Good catch. Forgot about that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum