|
Dmitry
In the page, under Options, it says
"If you wish to use up/down arrows instead of a scrollbar in this control..."
I think it should be more specific in order not to confuse with the up/down KEYS.
I was reading it, and I had an issue working with the keyboard and I thougth this was related... it took me a while realizing you meant the up/down arrows scroll-control instead of the up/down keys.
Regards
modified on Friday, November 20, 2009 6:59 AM
|
|
|
|
|
First of all, nice work! I have a question though. This does not seem to work if I am generating a text box dynamically and append the autosuggestion script with it. Specifically, the html code below added a text box each time you click the add button, but that text box cannot auto suggest even though I generated the autosuggest script with the new text box. Any suggestions?
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="autosuggest.css"></link>
<script type="text/javascript" src="autosuggest.js"></script>
<script type="text/javascript">
var custom_array = ['audi', 'abentley','abuick', 'achevrolet', 'achrysler', 'adodge', 'aford', 'agm',
'ahonda', 'ahyundai', 'aisuzu', 'ajeep', 'akia', 'alamborghini', 'amazda', 'nissan',
'aopel', 'apontiac', 'arenault', 'asaab', 'atoyota', 'avolkswagen'];
</script>
<script language="javascript">
fields = 1;
function addInput() {
var htmlText = "<input type='text' value='' id='field"+fields+"' name='field"+fields+"' />" + "<script type='text/javascript'> new autosuggest('field"+fields+"', custom_array); </scr"+"ipt>"+"<br />";
var newElement = document.createElement('div');
newElement.id = 'SomeID';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('text1');
fieldsArea.appendChild(newElement);
document.getElementById("field"+fields).focus();
fields += 1;
}
</script>
</head>
<body>
<form name="orderform" action="Order.jsp" method="get">
<input type="text" name="field0"/><script type='text/javascript'> new autosuggest('field0', custom_array); </script>
<input type="button" onclick="addInput()" name="add" value="Add input field" />
<div id="text1">
</div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
|
|
|
|
|
Hi,
Your code works for me in Firefox, but not in IE, Opera or Chrome - the latter 3 can't find the newly created input box. This probably has something to do with the timing of DOM operations.
I'll try to tackle this problem shortly.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Found the solution: you need to call the "new autosuggest" directly, not through the creation of script element.
var fields = 1;
function addInput()
{
var input = document.createElement("input");
input.type = "text";
input.id = "field" + (++fields);
input.name = "field" + fields;
var fieldsArea = document.getElementById('text1');
fieldsArea.appendChild(input);
new autosuggest("field" + fields, custom_array);
input.focus();
}
- this works for me in Firefox 3.6, Opera 10, Chrome 3 and IE 7.
Hope it helps,
Dmitriy.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi,
As I said previously, I am trying to reproduce the autosuggest control of Google Code.
A screenshot of what I manage to do:
http://img252.imageshack.us/img252/6416/autosuggest.png
But I am still struggling to remove space between suggestions.
Whatever I do in CSS does not change that, so I assume the issue lies in the JavaScript code. I am still a newbie in JS.
Any idea?
Thanks.
|
|
|
|
|
But I am still struggling to remove space between suggestions.
The solution was actually simple: there was a line-height property for table cells in another CSS file.
|
|
|
|
|
Great control!
I have been trying to implement a variable which will tell me if the user has selected an item, or if the text typed is not in the list.
How should this be done? I have of course tried with the selectedIndex, but once a user first has chosen an item and afterwards changed the text to something not in the list, the selectedIndex still remembers the last selected item.
any ideas?
|
|
|
|
|
Hi,
KGiil wrote: I have of course tried with the selectedIndex, but once a user first has chosen an item and afterwards changed the text to something not in the list, the selectedIndex still remembers the last selected item.
This is a bug, of course - I'll try to find a solution shortly (in a few hours).
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Please try the following. Find the code at the end of the suggest method:
if(this.total)
{
this.startTimer(0);
this.build();
}
else this.hide();
Change it to:
if(this.total)
{
this.startTimer(0);
this.build();
}
else
{
this.selectedIndex = -1;
this.hide();
}
This should fix the problem - selectedIndex will be -1 when no variants are available.
Hope it helps,
Dmitriy.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Another solution: you could simply check the variable total of autosuggest object - it holds the # of available suggestions to the typed keyword. If it is 0 - the typed text is not in the list.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
How is this done?
Can you provide an example for checking the total and/or selectedIndex variables?
Thanks
|
|
|
|
|
Hi,
you create the autosuggest object by calling it's constructor:
var obj = new autosuggest(parameters)
and then, in script, just check:
if(obj.total)
{
}
else
{
}
Very simple
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi,
Is there a mean to display the full list of the array as soon as the text area get the focus, then shorten the suggestion list according to the characters entered?
I'm trying to hack your code to do that.
Regards,
Flamme
|
|
|
|
|
new public variable:
this.display_all = true
in suggest:
if (!this.display_all)
{
for(var i = 0; i < al; i++)
{
var key = this.keywords[i];
var value = this.values[i];
if(re1.test(key))
{
++this.total;
matchArray[matchArray.length] = key;
matchVArray[matchVArray.length] = value;
}
else if(after && re2.test(key))
{
++this.total;
afterArray[afterArray.length] = key;
afterVArray[afterVArray.length] = value;
}
else
{
otherArray[otherArray.length] = key;
otherVArray[otherVArray.length] = value;
}
}
}
else {
for(var i = 0; i < al; i++)
{
++this.total;
matchArray[matchArray.length] = this.keywords[i];
matchVArray[matchVArray.length] = this.values[i];
}
}
|
|
|
|
|
Do you want to display the full list when user focuses the input field? If yes, then find the setupEvents method, and modify it:
setupEvents: function()
{
if(!this.evsetup)
{
this.evsetup = true;
this.addEvent(document, "keydown", this.funcCheck);
this.addEvent(this.field, "blur", this.funcClear);
this.addEvent(document, "keypress", this.funcPress);
}
this.preSuggest(-1);
},
Hope it helps,
Dmitriy.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
> Do you want to display the full list when user focuses the input field?
Yes, this is what I am trying to do.
Thanks for your help.
But it does not seem to work.
Regards,
Flamme
|
|
|
|
|
flammme wrote: But it does not seem to work.
My bad. Just tested - the edited method should be:
setupEvents: function()
{
if(!this.evsetup)
{
this.evsetup = true;
this.addEvent(document, "keydown", this.funcCheck);
this.addEvent(this.field, "blur", this.funcClear);
this.addEvent(document, "keypress", this.funcPress);
}
var that = this;
this.timer = setTimeout(function()
{
that.preSuggest(-1);
},
25);
},
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thank you. It works.
May I ask what should I do to have this behaviour when we enter a delimiter for multiple autocomplete entries?
Regards,
Flamme
|
|
|
|
|
Hi, Dmitry !
I used the variable start_check as a trigger for this "auto-open" feature. If it is zero - auto-open is enabled.
And trying to forsee possible situations, I've added some code to checkKey function.
So now it looks like this:
checkKey: function(event) {
event = event || window.event;
var code = event.keyCode;
var obj = event.srcElement || event.target;
obj = obj.autosuggest;
obj.caret_moved = 0;
var term = "";
obj.stopTimer();
switch (code) {
<...............>
default:
if (code == 8 && obj.field.value.length == 1 && obj.start_check == 0)
code = -1;
obj.caret_moved = 0;
obj.timer = setTimeout(function() {
obj.preSuggest(code);
},
(obj.response_time < 10 ? 10 : obj.response_time));
}
},
<.................>
setupEvents: function() {
if (!this.evsetup) {
this.evsetup = true;
this.addEvent(document, "keydown", this.funcCheck);
this.addEvent(this.field, "blur", this.funcClear);
this.addEvent(document, "keypress", this.funcPress);
}
if (that.start_check == 0) {
var that = this;
var s;
if (that.field.value.length > 0)
s = that.field.value;
else
s = -1;
that.timer = setTimeout(function() {
that.preSuggest(s);
}, 25);
}
},
Regards,
Gennady
My English is permanently under construction. Be patient !!
modified on Sunday, December 20, 2009 6:04 AM
|
|
|
|
|
It can be useful to insert in the text field the value instead of the keyword.
Here are the code replacements:
this.full_refresh = false;
+ this.insert_values = false;
this.use_iframe = true;
this.displayed = false;
- var kl = this.keywords.length;
+ var kl = (this.insert_values) ? this.values.length : this.keywords.length;
for(var i = 0, c = 0; i < kl; i++)
if(this.bool[i] && (c++ == this.current))
break;
this.selectedIndex = i;
- this.insertWord(this.keywords[i]);
+ if (this.insert_values)
+ {
+ this.insertWord(this.values[i]);
+ }
+ else
+ {
+ this.insertWord(this.keywords[i]);
+ }
if(this.onSelect)
this.onSelect(i, this);
Regards,
Flamme
|
|
|
|
|
Good evening,
not sure this should be a built-in functionality - I can't think of any scenario when user, when searching for a particular value, will want a code (=value) for it. As your solution, here is simplier one:
ew autosuggest("target", custom_array, null, function(index, control) { control.field.value = control.values[index]; });
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Good evening,
Thank you.
Put values could be very useful. Examples:
My users have to enter some cryptic stuff, like "a0a;a+" or "F.()" or etc.
They don't usually know what to write, so I put a description text and what they select enters the cryptic stuff.
My main goal is to reproduce text fields menu of Google Code:
http://img33.imageshack.us/img33/2740/googlecode.png
Regards,
Flamme
|
|
|
|
|
flammme wrote: My main goal is to reproduce text fields menu of Google Code:
I'm currently working on version 3.0 of the autosuggest control - it will help in this
Hope to have is posted on 12th or 14th.
Regards,
Dmitriy.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Great.
Thank you.
Regards,
Flamme
|
|
|
|
|
Hi Dmitry
Thanks for the update, It works fine
I suggest add another capture to this page (codeproject), including the use_scroll=true (no arrows, like this[^]), it would be easier for new users to associate with select-combo behaviour.
Also, I suggest include a working example in this page, as zichun[^] has.
Best Regards
modified on Friday, November 20, 2009 8:36 AM
|
|
|
|
|