Just wait a bit and you probably won't need to mess with it at all, because i'm about to release a complete and easy to use AJAX driven suggest (auto-complete) project that is written in PHP.
i was able to populate data from the access database into the list, but when i use the downarrow key 12 times it works, but gives an error when it is pressed 13th time either down or up
Do you have commented (documented) versions of the JS files? They are quite hard to follow without comments so I assume you have them, atleast for your self... If you do, would you share them?
Hi, first of all, its a very nice script, but, I wonder how can I use it with a multidimensional array, because my array also keeps the ID of the description in the database.
For example, my array contains the following values:
country = new Array(1);
country[1][0] --> name of the country
country[1][1] --> id of the country.
So, I only will use country[1][0] and the rest I'll put it into a hidden box.
You could try put other function to look witch array you're looking for....i think you use like a combo....example
country , id
Argetnina, 1
Brasil,2
EEUU,3
hi
i need the autocompletion in my input field only if a special radio button is checked. if this radio button gets unchecked, the autocompletion generated by Zichuns javascript must not appear again.. (so setting the attribute of html-input to autocomplete="off" does not work, of course).
I want to know if it's possible to initialize the value of the text input to a value like we usually do in HTML eg. but using this script in the same time... if the initial value isn't the desired one then the user can change it using the script...
thx
-- modified at 15:32 Wednesday 30th November, 2005
Is there any way to turn off autocomplete once the page is loaded? For example, let's say i have 'apples' in the autocomplete list but i want to search for 'apple' - there is no way to do it (that i can see). Can anyone help?
Hi Zichun
Your effort is tooo cool. I reallly admire ur efforts. I am replacing the combo boxes of my project form the Auto Complete boxes. And i have done it. I use dynamic DB values to create array of my list to drop. I am trying to add one feature that that list which append on the KEY press event, that will drop on the click of a button like in Combo Boxes. But till now i am not sucess full. Can u guide me to do this please.
It is imediate and very serious issue with me. And i am now seeing upon you.
Seeing forward........
Nomi
Hi
I can post here the modified js which does this:
1) when you click down arrow without anything in text box all list is opened
2) support for ids (like 101-apple, 102-orange)
Please let me know if it's helpfull in any way or if there are any errors.
//////actb.js
function actb(obj, ca, hid, ids) {
/* ---- Public Variables ---- */
this.actb_timeOut = -1;
// Autocomplete Timeout in ms (-1: autocomplete never time out)
this.actb_lim = 4;
// Number of elements autocomplete can show (-1: no limit)
this.actb_firstText = true;
// should the auto complete be limited to the beginning of keyword?
this.actb_mouse = true;
// Enable Mouse Support
this.actb_delimiter = new Array(';', ',');
// Delimiter for multiple autocomplete. Set it to empty array for single autocomplete
this.actb_startcheck = 1;
// Show widget only after this number of characters is typed in.
/* ---- Public Variables ---- */
/* ---- Private Variables ---- */
var actb_delimwords = new Array();
var actb_cdelimword = 0;
var actb_delimchar = new Array();
var actb_display = false;
var actb_pos = 0;
var actb_total = 0;
var actb_curr = null;
var actb_hidd = null;
var actb_rangeu = 0;
var actb_ranged = 0;
var actb_bool = new Array();
var actb_pre = 0;
var actb_toid;
var actb_tomake = false;
var actb_getpre = "";
var actb_mouse_on_list = 1;
var actb_kwcount = 0;
var actb_caretmove = false;
this.actb_keywords = new Array();
this.actb_ids = new Array();
/* ---- Private Variables---- */
this.actb_keywords = ca;
this.actb_ids = ids;
var actb_self = this;
function actb_clear(evt) {
if (!evt) evt = event;
removeEvent(document, "keydown", actb_checkkey);
removeEvent(actb_curr, "blur", actb_clear);
removeEvent(document, "keypress", actb_keypress);
actb_removedisp();
}
function actb_parse(n) {
if (actb_self.actb_delimiter.length > 0) {
var t = actb_delimwords[actb_cdelimword].trim().addslashes();
var plen = actb_delimwords[actb_cdelimword].trim().length;
} else {
var t = actb_curr.value.addslashes();
var plen = actb_curr.value.length;
}
var tobuild = '';
var i;
if (actb_self.actb_firstText) {
var re = new RegExp("^" + t, "i");
} else {
var re = new RegExp(t, "i");
}
var p = n.search(re);
for (i = 0; i < p; i++) {
tobuild += n.substr(i, 1);
}
tobuild += "<font style='" + (actb_self.actb_hStyle) + "'>"
for (i = p; i < plen + p; i++) {
tobuild += n.substr(i, 1);
}
tobuild += "</font>";
for (i = plen + p; i < n.length; i++) {
tobuild += n.substr(i, 1);
}
return tobuild;
}
function actb_generate() {
if (document.getElementById('tat_table')) {
actb_display = false;
document.body.removeChild(document.getElementById('tat_table'));
}
if (actb_kwcount == 0) {
actb_display = false;
return;
}
a = document.createElement('table');
a.cellSpacing = '1px';
a.cellPadding = '2px';
a.style.position = 'absolute';
a.style.top = eval(curTop(actb_curr) + actb_curr.offsetHeight) + "px";
a.style.left = curLeft(actb_curr) + "px";
a.style.backgroundColor = actb_self.actb_bgColor;
a.id = 'tat_table';
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
if (actb_self.actb_mouse) {
a.onmouseout = actb_table_unfocus;
a.onmouseover = actb_table_focus;
}
var counter = 0;
for (i = 0; i < actb_self.actb_keywords.length; i++) {
if (actb_bool[i]) {
counter++;
r = a.insertRow(-1);
if (first && !actb_tomake) {
r.style.backgroundColor = actb_self.actb_hColor;
first = false;
actb_pos = counter;
} else if (actb_pre == i) {
r.style.backgroundColor = actb_self.actb_hColor;
first = false;
actb_pos = counter;
} else {
r.style.backgroundColor = actb_self.actb_bgColor;
}
r.id = 'tat_tr' + (j);
c = r.insertCell(-1);
c.style.color = actb_self.actb_textColor;
c.style.fontFamily = actb_self.actb_fFamily;
c.style.fontSize = actb_self.actb_fSize;
c.innerHTML = actb_parse(actb_self.actb_keywords[i]);
c.id = 'tat_td' + (j);
c.setAttribute('pos', j);
if (actb_self.actb_mouse) {
c.style.cursor = 'pointer';
c.onclick = actb_mouseclick;
c.onmouseover = actb_table_highlight;
}
j++;
}
if (j - 1 == actb_self.actb_lim && j < actb_total) {
r = a.insertRow(-1);
r.style.backgroundColor = actb_self.actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_self.actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_self.actb_fSize;
c.align = 'center';
replaceHTML(c, '\\/');
if (actb_self.actb_mouse) {
c.style.cursor = 'pointer';
c.onclick = actb_mouse_down;
}
break;
}
}
actb_rangeu = 1;
actb_ranged = j - 1;
actb_display = true;
if (actb_pos <= 0) actb_pos = 1;
}
function actb_remake() {
document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.cellSpacing = '1px';
a.cellPadding = '2px';
a.style.position = 'absolute';
a.style.top = eval(curTop(actb_curr) + actb_curr.offsetHeight) + "px";
a.style.left = curLeft(actb_curr) + "px";
a.style.backgroundColor = actb_self.actb_bgColor;
a.id = 'tat_table';
if (actb_self.actb_mouse) {
a.onmouseout = actb_table_unfocus;
a.onmouseover = actb_table_focus;
}
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
if (actb_rangeu > 1) {
r = a.insertRow(-1);
r.style.backgroundColor = actb_self.actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_self.actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_self.actb_fSize;
c.align = 'center';
replaceHTML(c, '/\\');
if (actb_self.actb_mouse) {
c.style.cursor = 'pointer';
c.onclick = actb_mouse_up;
}
}
for (i = 0; i < actb_self.actb_keywords.length; i++) {
if (actb_bool[i]) {
if (j >= actb_rangeu && j <= actb_ranged) {
r = a.insertRow(-1);
r.style.backgroundColor = actb_self.actb_bgColor;
r.id = 'tat_tr' + (j);
c = r.insertCell(-1);
c.style.color = actb_self.actb_textColor;
c.style.fontFamily = actb_self.actb_fFamily;
c.style.fontSize = actb_self.actb_fSize;
c.innerHTML = actb_parse(actb_self.actb_keywords[i]);
c.id = 'tat_td' + (j);
c.setAttribute('pos', j);
if (actb_self.actb_mouse) {
c.style.cursor = 'pointer';
c.onclick = actb_mouseclick;
c.onmouseover = actb_table_highlight;
}
j++;
} else {
j++;
}
}
if (j > actb_ranged) break;
}
if (j - 1 < actb_total) {
r = a.insertRow(-1);
r.style.backgroundColor = actb_self.actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_self.actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_self.actb_fSize;
c.align = 'center';
replaceHTML(c, '\\/');
if (actb_self.actb_mouse) {
c.style.cursor = 'pointer';
c.onclick = actb_mouse_down;
}
}
}
function actb_goup() {
if (!actb_display) return;
if (actb_pos == 1) return;
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_bgColor;
actb_pos--;
if (actb_pos < actb_rangeu) actb_moveup();
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
}
function actb_godown() {
if (!actb_display) return;
if (actb_pos == actb_total) return;
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_bgColor;
actb_pos++;
if (actb_pos > actb_ranged) actb_movedown();
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
}
function actb_movedown() {
actb_rangeu++;
actb_ranged++;
actb_remake();
}
function actb_moveup() {
actb_rangeu--;
actb_ranged--;
actb_remake();
}
/* Mouse */
function actb_mouse_down() {
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_bgColor;
actb_pos++;
actb_movedown();
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_hColor;
actb_curr.focus();
actb_mouse_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
}
function actb_mouse_up(evt) {
if (!evt) evt = event;
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_bgColor;
actb_pos--;
actb_moveup();
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_hColor;
actb_curr.focus();
actb_mouse_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
}
function actb_mouseclick(evt) {
if (!evt) evt = event;
if (!actb_display) return;
actb_mouse_on_list = 0;
actb_pos = this.getAttribute('pos');
actb_penter();
}
function actb_table_focus() {
actb_mouse_on_list = 1;
}
function actb_table_unfocus() {
actb_mouse_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
}
function actb_table_highlight() {
actb_mouse_on_list = 1;
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_bgColor;
actb_pos = this.getAttribute('pos');
while (actb_pos < actb_rangeu) actb_moveup();
while (actb_pos > actb_ranged) actb_movedown();
document.getElementById('tat_tr' + actb_pos).style.backgroundColor = actb_self.actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
}
/* ---- */
function actb_insertword(a) {
if (actb_self.actb_delimiter.length > 0) {
str = '';
l = 0;
for (i = 0; i < actb_delimwords.length; i++) {
if (actb_cdelimword == i) {
prespace = postspace = '';
gotbreak = false;
for (j = 0; j < actb_delimwords[i].length; ++j) {
if (actb_delimwords[i].charAt(j) != ' ') {
gotbreak = true;
break;
}
prespace += ' ';
}
for (j = actb_delimwords[i].length - 1; j >= 0; --j) {
if (actb_delimwords[i].charAt(j) != ' ') break;
postspace += ' ';
}
str += prespace;
str += a;
l = str.length;
if (gotbreak) str += postspace;
} else {
str += actb_delimwords[i];
}
if (i != actb_delimwords.length - 1) {
str += actb_delimchar[i];
}
}
actb_curr.value = str;
setCaret(actb_curr, l);
} else {
actb_curr.value = a;
}
actb_mouse_on_list = 0;
actb_removedisp();
}
function actb_inserthidden(index) {
if (actb_hidd)
actb_hidd.value = ids[index];
}
/*
Function executed when an option is selected
*/
function actb_penter() {
if (!actb_display) return;
actb_display = false;
var word = '';
var word_index = 0;
var c = 0;
for (var i = 0; i <= actb_self.actb_keywords.length; i++) {
if (actb_bool[i]) c++;
if (c == actb_pos) {
word = actb_self.actb_keywords[i];
word_index = i
break;
}
}
//alert('here we can handle an hidden with some database id values');
actb_insertword(word);
actb_inserthidden(word_index);
l = getCaretStart(actb_curr);
}
function actb_removedisp() {
if (actb_mouse_on_list == 0) {
actb_display = 0;
if (document.getElementById('tat_table')) {
document.body.removeChild(document.getElementById('tat_table'));
}
if (actb_toid) clearTimeout(actb_toid);
}
}
function actb_keypress(e) {
if (actb_caretmove) stopEvent(e);
return !actb_caretmove;
}
function actb_checkkey(evt) {
if (!evt) evt = event;
a = evt.keyCode;
caret_pos_start = getCaretStart(actb_curr);
actb_caretmove = 0;
switch (a) {
case 38:
actb_goup();
actb_caretmove = 1;
return false;
break;
case 13: case 9:
if (actb_display) {
actb_caretmove = 1;
actb_penter();
return false;
} else {
return true;
}
break;
case 40:
if (actb_curr.value != '') {
actb_godown();
actb_caretmove = 1;
return false;
break;
}
default:
setTimeout(function() {
actb_tocomplete(a)
}, 50);
break;
}
}
function actb_tocomplete(kc) {
if (kc == 38 || (kc == 40 && actb_curr.value != '') || kc == 13) return;
var i;
if (actb_display) {
var word = 0;
var c = 0;
for (var i = 0; i <= actb_self.actb_keywords.length; i++) {
if (actb_bool[i]) c++;
if (c == actb_pos) {
word = i;
break;
}
}
actb_pre = word;
} else {
actb_pre = -1;
}
delim_split = '';
for (i = 0; i < actb_self.actb_delimiter.length; i++) {
delim_split += actb_self.actb_delimiter[i];
}
delim_split = delim_split.addslashes();
delim_split_rx = new RegExp("([" + delim_split + "])");
c = 0;
actb_delimwords = new Array();
actb_delimwords[0] = '';
for (i = 0,j = actb_curr.value.length; i < actb_curr.value.length; i++,j--) {
if (actb_curr.value.substr(i, j).search(delim_split_rx) == 0) {
ma = actb_curr.value.substr(i, j).match(delim_split_rx);
actb_delimchar[c] = ma[1];
c++;
actb_delimwords[c] = '';
} else {
actb_delimwords[c] += actb_curr.value.charAt(i);
}
}
var l = 0;
actb_cdelimword = -1;
for (i = 0; i < actb_delimwords.length; i++) {
if (caret_pos_end >= l && caret_pos_end <= l + actb_delimwords[i].length) {
actb_cdelimword = i;
}
l += actb_delimwords[i].length + 1;
}
var ot = actb_delimwords[actb_cdelimword].trim();
var t = actb_delimwords[actb_cdelimword].addslashes().trim();
} else {
var ot = actb_curr.value;
var t = actb_curr.value.addslashes();
}
//patch to permit swohing the entire list
if (kc == 40 && actb_curr.value == '') {
actb_total = 0;
actb_tomake = false;
actb_kwcount = 0;
for (i = 0; i < actb_self.actb_keywords.length; i++) {
actb_bool[i] = false;
if (actb_self.actb_keywords[i] != '' && actb_self.actb_keywords[i]) {
if (actb_curr.value == '') {
actb_curr.value = actb_self.actb_keywords[i];
}
actb_total++;
actb_bool[i] = true;
actb_kwcount++;
if (actb_pre == i) actb_tomake = true;
}
}
if (actb_toid) clearTimeout(actb_toid);
if (actb_self.actb_timeOut > 0) actb_toid = setTimeout(function() {
actb_mouse_on_list = 0;
actb_removedisp();
}, actb_self.actb_timeOut);
return actb_generate();
}
if (ot.length == 0) {
actb_mouse_on_list = 0;
actb_removedisp();
}
if (ot.length < actb_self.actb_startcheck) return this;
if (actb_self.actb_firstText) {
var re = new RegExp("^" + t, "i");
} else {
var re = new RegExp(t, "i");
}
actb_total = 0;
actb_tomake = false;
actb_kwcount = 0;
for (i = 0; i < actb_self.actb_keywords.length; i++) {
actb_bool[i] = false;
if (re.test(actb_self.actb_keywords[i])) {
actb_total++;
actb_bool[i] = true;
actb_kwcount++;
if (actb_pre == i) actb_tomake = true;
}
}
Hello, I would also like to drop the list down triggered by an external JavaScript command, e.g. by clicking a separate button.
The code you posted, claudiu, doesn't work like expected, nothing happens when I press the arrow-down-key on my keyboard (but it should do so, right?).
I just replaced the actb.js file with the one you provided, but nothing changed (it works like before, no errors, ...)
I would like to get array from SQL query. Example: user type letter "A" and then php script selects from Oracle database all word begining with A.
How can it be done? Where should I insert my query function js?
function processReqChange() {
if (req.readyState == 4) {
if (req.status == 200) {
if (req.responseText.substr(0,9)!='redirect;') {
//document.getElementById("debugArea").innerHTML += req.responseText;
//alert (req.responseText);
actb_self.actb_keywords = eval(req.responseText);
} else {
document.location='/ru/start/?'+req.responseText.substr(9);
}
} else {
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}
}
Then after
}else{
var ot = actb_curr.value;
var t = actb_curr.value.addslashes();
}
I have added this code
if (ot.length == 1 && actb_letter != ot) {
actb_letter = ot;
actb_self.actb_keywords = Array();
ot = ot.toLowerCase();
loadXMLDoc('autocomplete.php?letter='+encodeURI(ot));
//actb_self.actb_keywords = eval(req.responseText);
}
autocomplete.php is a simple php to select words in database...
here autocomplete.php part of php
$Arr = Array();
//Поиск ключевых слов - atcb.js
if ((isset($_GET['letter'])) && ($_GET['letter']!='')) {
$letter=urldecode(iconv("UTF-8", "CP1251", htmlspecialchars($_GET['letter'], ENT_QUOTES)));
$letter=$letter."%";
$stid = OCIParse($conn,"SELECT key_word,count(id_pid) NUM FROM thesaurus WHERE key_word LIKE :word GROUP BY key_word");
ocibindbyname($stid,':word', $letter);
OCIExecute($stid);
$n=OCIFetchStatement($stid, $public);
header("Content-type: text/plain; charset=windows-1251");
if ($n>0) {
echo "Array('".implode("','",$public['KEY_WORD'])."')";
} else {
echo "Array()";
}
}
That's all...
Last Visit: 31-Dec-99 18:00 Last Update: 26-Sep-24 6:41