CTAPbIu_MABP's BLOG » autocomplete

JComboBox Demo

CTAPbIu_MABP — Fri, 04 Dec 2009 18:00:10 +0000

Пока я сижу без реального проекта вдохновение брать неоткуда :( Поэтому постить тут буду что есть, а есть первый толковый вопрос по Java с форума

Задание было дизейблить кнопку если в комбике ничего не введено Swing конечно не jQuery но на нем тоже можно делать UI


package ua.kiev.mabp;

import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.GridBagLayout;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.util.Vector;

/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 30.11.2009
 * Time: 18:48:00
 */

public class ComboBoxEventDemo extends JFrame {

    public ComboBoxEventDemo(String name) {
        super(name);
    }

    public void addComponentsToPane(final Container pane) {

        String comboPrefix = "ComboBox Item #";
        int numItems = 15;
        Vector vector = new Vector(numItems);
        for (int i = 0; i < numItems; i++) {
            vector.addElement(comboPrefix + i);
        }

        final JComboBox searchCombo = new JComboBox(vector);
        searchCombo.setEditable(true);
        final JButton okButton = new JButton("OK");

        searchCombo.getEditor().getEditorComponent().addKeyListener(new KeyListener() {
            public void keyTyped(KeyEvent e) {
                System.out.print("keyTyped");
            }

            public void keyPressed(KeyEvent e) {
                System.out.print("keyPressed");
            }

            public void keyReleased(KeyEvent e) {
                System.out.print("keyReleased");
                try {
                    String s = (String) searchCombo.getSelectedItem();
                    okButton.setEnabled(s != null && !s.isEmpty());
                }
                catch (NullPointerException npe) {
                    okButton.setEnabled(false);
                }
            }
        });

        add(searchCombo);
        add(okButton);

        pane.setLayout(new GridBagLayout());
        setPreferredSize(new Dimension(450, 450));
    }

    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                FocusEventDemo frame = new ComboBoxEventDemo("JComboBox Demo");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.addComponentsToPane(frame.getContentPane());
                frame.pack();
                frame.setVisible(true);
            }
        });
    }
}

Я прекрасно понимаю что это гавно никому не надо не мне ни вам, хотя кто знает может кому-то когда-то пригодится, а пишу я это для того чтоб вы не забывали что я еще есть и жив, зашли на мой сайт оставить камент типа "ну и дерьмо же ты постишь, чувак, совсем хуевый стал, отпишусь ка я от твоего RSS" и тем самым накрутили бы мне счетчик посещаймости :D

Ладно заспойлю вам кое-что, может не отпишитесь от моего RSS. В ближайшее время будет статья о векторной графике с красивым примером.

Обновил автокомплит

CTAPbIu_MABP — Tue, 01 Sep 2009 18:32:02 +0000

С помощью Andrea Riciputi добрался поправить пару минорных багов в автокомплите, заодно с его пинка, точнее на основе его патча дописал новый функционал который позволяет кастомизировать селект под автокоплит. В общем смотрите сами:

Вот такая прелесть получается из вот такой простой разметки и одной строчки кода


$("select#myselect").autocomplete();

По умолчанию используются вот такие опции:


{
    source: this,
    values: true,
    fillin: true,
    writable : false,
    onSelect: function() {
        select.val(this.pairs[this.ac.val()]);
    }
}

Обновил автокомплит

CTAPbIu_MABP — Sat, 16 May 2009 13:49:11 +0000

Решил поправить несколько надоедливых багов в автокомплите. Обновления прошли под принципом KISS, чем меньше кода добавлено для получения максимальной гибкости, тем лучше!

Поправлена кнопка таб, теперь при ее нажатии происходит выбор текущего элемента и переход курсора в следующее поле ввода.
Добавлена возможность использовать кастомный формат данных переданных с бэкенда. Например можно использовать вложенные массивы [{a:'a'},{b:'b'}]. Для этого надо использовать параметр dataHandler передавая в него функцию для обработки данных, пример функции смотрите в example 12
Добавлена поддержка каскадных списков, для этого в параметр url теперь можно передавать функцию, которая будет возвращать новую ссылку, следите за тем чтобы функция очищала кеш.
Для неполных списков, добавлен флаг partial который будет заставлять автокомплит делать запрос на сервер каждый раз как введена следующая буква слова.

Обновил автокомплит

CTAPbIu_MABP — Wed, 18 Feb 2009 20:16:01 +0000

Вчера весь вечер сидел дописывал в autocomplete вещи которые больше нельзя было игнорировать. А сегодня вашему вниманию предлагается changelog:

Полностью убрано определение браузеров, потому что оно не просто бесполезно а по большому счету мешает и сбивает с толку в случаи с Chrome которого jQuery определяет как Safari , а на самом деле он ведет себя как FireFox . Теперь все везде работает за счет хаков CSS и сглаживания jQuery .
Сделал давно прошеную фишку, чтобы можно было передавать не только видимое значение (text) но и реальное значение (value). Это работает не только с option, но также с объектами и массивами. Для объекта будет возвращаться ключ, а для массива будет возвращаться порядковый номер начиная с нуля.
Для того чтобы передача истинного значения выглядела аккуратно пришлось еще добавить режим select-only который не даст пользователю написать свой вариант в autocomplete, но как по мне это не правильно, потому что так все возвращается обратно к функциональности select-box'a.
По скольку до объекта autocomplete напрямую кроме как из событий добраться нельзя я сделал событие onSetup в котором можно произвести произвольные манипуляции с autocomplete после того как он будет создан. Это позволит управлять элементами назначая им новые обработчики или стили.
Еще убран хак для Safari так как у меня на винде в найтбилдах он больше не появляется, если он не исчез - пишите и я верну.

В остальных местах еще немного порефакторил. Но это влияет только на производительность. Где-то в глубине рефакторинга решил использовать метод live для всех элементов выпадающего списка, но потом понял что для этого придется отказаться от поддержки jQuery версии 1.2.6, а мне этого не хотелось и подумав еще я сумел сделать код еще проще.

Автокэш

CTAPbIu_MABP — Thu, 08 May 2008 16:08:29 +0000

Я тут недавно получил комментарий от человека со странным ником, он сказал мне, что мой autocomplete конечно всем хорош, но имеет один существенный недостаток. Получив данные от сервера через AJAX, при уточнении критерия поиска он снова обращается к серверу, вместо того чтобы фильтровать уже полученные данные.

Приведу пример. Мы ищем города начинающиеся на 'К' и получаем от сервера ответ ['кардуба','кардижопа','казупий','кипир'] :) При вводе второй буквы мы уже не обращаемся к серверу, а фильтруем то, что получили прошлый раз, например вторая буква 'А' тогда 'КА' = ['кардуба','кардижопа','казупий']. При вводе третьей буквы все повторяется 'КАР' = ['кардуба','кардижопа'].

Я вижу два выхода из этой ситуации.

Первый - это простой обход всего массива каждый раз при вводе новой буквы, недостаток этого метода в том что при 1000 городах это будет занимать уже ощутимое время.

Второй способ полон геморроя и собственно его я и буду дальше описывать. Для его реализации понадобиться намного больше память, но намного меньше времени, я не могу сказать, что лучше память или время, но могу сказать, что второй способ хотя бы напряг мои мозги. Так вод вам понадобиться: вазелин офисный, пол литра, руки прямые, две штуки и терпение, много терпения, хотя нет, руки, пожалуй, должны сгибаться в локтях....

Итак что собственно делаем. Вводим первую букву 'К', получаем от сервера ответ и сохраняем в переменной cache в таком виде.


cache =  {
	'К':['кардуба','кардижопа','казупий','кипир']
};

Вводим вторую букву 'А', теперь у нас строка 'КА', выбираем все ключи нашего кэша и начиная с самого длинного начинаем искать вхождение ключа в строку, если находим берем массив-значение и фильтруем а потом сохраняем результат с новым ключом, в результате.


cache = {
	'К':['кардуба','кардижопа','казупий','кипир'],
	'КА':['кардуба','кардижопа','казупий']
};

Еще раз та же процедура вводим 'Р', строка 'КАР', берем ключи объекта, разворачиваем в обратном порядке (чтобы сначала шли самые длинные), и ищем их вхождение в строку, если нашлось то снова фильтруем и сохраняем.


cache = {
	'К':['кардуба','кардижопа','казупий','кипир'], 
	'КА':['кардуба','кардижопа','казупий'], 
	'КАР':['кардуба','кардижопа']
};

Как видите одни и те же города находятся в массиве много раз, это есть не очень экономно с точки зрения памяти но зато к ним очень быстро можно получить доступ. Реализация этого метода тоже весьма муторная и я был бы не против сильно её заоптимайзить но вот что-то никак...



var cache = {'':['кардуба','кардижопа','казупий','кипир','другой город','еще село']},
	mask = ['к','ка','кар'];
	
function check(mask){
	// пытаемся быстро выйти
	if (cache[mask])
		return cache[mask]; 
	
	// инициализируем переменные
	var map = [], array = [];
	
	// получаем массив ключей
	for(var item in cache)
		array.push(item);
	// разворачиваем самыми длинными вначало
	array = array.reverse();
	
	// ищем...
	for(var item in array)
		// если вхождение ключа в строку имеет нулевую позицию
		if(!mask.indexOf(array[item])){
			// фильтруем
			for(var word in cache[array[item]])
				// если вхождение строки в элемент иммеет нулевую позицию
				if (!cache[array[item]][word].indexOf(mask))
					// сохраняем
					map.push(cache[array[item]][word]);
			break;
		}
	alert(map);
	cache[mask] = map
}

for (m in mask)
	check(mask[m]);

Вот такой вот алгоритм получился... Но это все было бы очень хорошо если бы наш бэкэнд (я имею ввиду сайт Киевстара) не возвращал только первых 500 найденных записей на каждый запрос, то есть если всего найдено 700 записей, то будут показаны только 500, причем первых найденных базой а не первых в алфавитном порядке.

Такое кэширование я конечно включу в следующий релиз autocomplete, но применять его сам вряд ли буду.

Autocomplete

CTAPbIu_MABP — Tue, 08 Apr 2008 14:57:44 +0000

Prehistory

First of all, I want to say, that this plugin was developed for KyivStar, therefore all fine details were studied and stipulated very carefully. For example, what should occur, when the user would reach last element of the list: whether it should rest against the end or begin a cycle all over again. Or whether the list should disappear when the cursor is out of it. All this passed through business analysts’ and designer and only then came to me.

On the other hand I tried to make autocomplete multifunctional (multipurpose) and as simple as possible for any person to use it on ones site. Remarkable is that even with switched off javascript the site would not lose functionality, and visitor can enter data anyway. Autocomplete was not made as a filtrator of data entered by the user but the tool which helps the user to fill the form more quickly.

Well-known plugin jquery.suggest was taken as an example. Pieces of which can be identified in some methods. In spite of the fact that I took mechanism, I have added some new functions and have removed some errors. So in last version jquery.suggest the code became more readable thanks to the removal of one check. But at the end of the list the cursor (illumination) disappears for one position and then again appears at the first element of the list. It happens because jquery (in traversing) always return itself to the object and doesn’t give value to quantity chosen nodes. Another authors fault that he persistently tries to apply $.fn.bgiframe to the list

Functions that were added: generation of the list from select-box, the limited visible part of the list with scrolling and prefilling of the list for it to look like a select-box. One more events handling onKeyPress. Well-known algorithm of caching MRU was deleted and replaced with my cache algorithm, this takes a lot of memory but it very fast!

Downloads

Last update 14.09.2009!

HTML file with examples (autocomplete.html)

Plugin itself (jquery.autocomplete.js)

Styles (autocomplete.css)

Little blue arrow (select.gif)

Progress bar backgraund image (progress.gif)

Php backend (search.phps)

Copy all this files to your own local web-server in root directory, rename search.phps to search.php and run http://path.to.your.server/autocomplete.html.

Examples

Example 1: Minimal requirements

To launch plugin you just need to put in one parameter, the url of php script which generats a list of words. Format of the list can be either xml or json.


$("#autocomplete1").autocomplete({
	url:'search.php'
});

Example 2: onSelect event

Plugin has four public events. First of them is onSelect, it fires where you pick element from the list. You can activate it by left clicking or pressing 'enter' button on the selected item. In this example I use one second delay before searching, and string must be at least 2 characters. The ansver from server will be in xml format so you can omit type property.


$("#autocomplete2").autocomplete({
	url:'search.php?type=xml',
	minchar:2,
	delay:1000, // in milliseconds
	onSelect:function(){
		alert(this.ac.val())
	},
	type:'xml'
});

Example 3: onKeyPress

onKeyPress event fires when you are typing. It can be used to filtrate user input. In this example you can use only alphabetical characters and white space, all other characters will be deleted. The fillin flag will fill in list before user start typing, because of input string is empty the request to the server will also contains empty mask value (i.e. search.php?type=json&mask=). In this case you will see list of one item with text "The list is empty!". The ansver from server will be in json format and you must set type property to 'json'.


$("#autocomplete3").autocomplete({
	url:'search.php?type=json',
	onKeyPress:function(){
		var o=this;
		setTimeout(function(){
			o.ac.val(o.ac.val().replace(/[^a-z ]+/g,""))
		},50)
	},
	fillin:true,
	type:'json'
});

Example 4: onError event

onError and onSuccess is the last two events, onError fires when AJAX has a problems otherwise onSuccess fires when you get answer from server. For example onError fires where you request for non-existing page. Also its an example of how to disable autocomplete. onSuccess get the same parametrs and scope.


$("#autocomplete4").autocomplete({
	url:'non_exist.php',
	onError:function(XMLHttpRequest, textStatus, errorThrown){
		this.ac.val(textStatus);
		this.ac.attr({disabled:"disabled"}).css({'background-color':'#d0d0d0'});
		this.ul.hide();
		this.img.unbind("click");
	}
});

Example 5: generation list from


$("#autocomplete5").autocomplete({
	source:"#select",
		onKeyPress:function(){
		var o=this;
		setTimeout(function(){
			o.ac.val(o.ac.val().replace(/[^0-9]+/g,""))
		},50)
	},
	fillin:true
});

Example 6: generation list from array

If you have no need to use AJAX or have no select-box on your page, you can generate autocomplete from array. Sorry but nested arrays are not supported so you can not use [{a:'a'},{b:'b'}]


$("#autocomplete6").autocomplete({
	source:['a','b','c','d','e'],
	fillin:true
});

Example 7: generation list from object

The same as above. Sorry but nested objects are not supported so you can not use [{a:'a'},{b:'b'}] or {a:{b:c}}


$("#autocomplete7").autocomplete({
	source:{a:'a',b:'b',c:'c',d:'d',e:'e'},
	fillin:true
});

Example 8: list position

Example of list position at the top of input box


$("#autocomplete8").autocomplete({
	url:'search.php',
	top:true
});

Example 9: real values

Example of real values in non writeable fields


$("#autocomplete9").autocomplete({
	url:'search.php',
	values : true,
	writable : false,
	onSelect:function(){
		alert(this.pairs[this.ac.val()]);
	}
});

Example 10: alternative setup

By onSetup event you can change all properties exept 'width' or change behaviour of elements after autocomplete created. This example demonstrate smooth animation to options list.


$("#autocomplete10").autocomplete({
	onSetup:function(){
		var self = this;
		self.url = 'search.php';
		self.img.unbind("click")
			.bind("click", function() {
				clearTimeout(self.close);
				self.scroll();
				self.ul.slideToggle("slow")
				self.ac.focus();
			});
	}
});

Example 11: progress animation

Example of real usage with event hndling and animation


$("#autocomplete11").autocomplete({
	url:'/content/polygon/search.php?type=json',
	onSuggest:function(){
		this.ac.css({'background-image': 'url("/content/source/autocomplete/progress.gif")'});
	},
	onError:function(XMLHttpRequest, textStatus, errorThrown){
		this.ac.val(textStatus);
		this.ac.attr({disabled:"disabled"}).css({'background-color':'#d0d0d0','background-image':'none'});
		this.ul.hide();
		this.img.unbind("click");
	},
	onDisplay:function(list){
		this.ac.css({'background-image':'none'});
		if (!list)
		this.ul.append("[Empty list...]");
	},
	minchar:2,
	type:'json'
});

Example 12: custom data format

Example of how to use custom data format


$("#autocomplete12").autocomplete({
    source : [{a:'a'},{b:'b'},{c:'c'},{d:'d'},{e:'e'}],
    fillin : true,
    dataHandler : function(mask){
        var self = this;
        return function(i, n) {
        for (var key in n){
            self.cache[mask].push(n[key]);
        }
        self.store[mask] += self.mark(n[key],mask);
        if(self.values && !self.pairs[n[key]])
            self.pairs[n[key]] = key;
        };
    }
});

Example 13: cascading selectbox

Example of how create selectbox wich depends on another input field


$("#autocomplete13").autocomplete({
    url:function(self){
        var state = $("#c13").attr("checked");
        if (self.ac.data("c13") != state){
            self.ac.data("c13", state);
            self.cache = {};
            self.store = {};
            self.pairs = {};
        }
        return 'search.php?c13='+state;
    }
});

Example 14: autocomplete form selectbox

Example of how to customize selectbox with plug-in


$("select#autocomplete14").autocomplete();

Notice

There is no simple way to re-render autocomplete created from select-box or array (object). You just need to re-create it.

Donation

If you like this plugin please vote for it on jquery site

Thanks to

Damir
Connected
Joey
Pasha
Morleydots
Gianfrasoft
Andrea
Ztalker
WooYek
Naden
Andrea Riciputi

Advanced options

Properties

url - [String|Function] ajax url
source - [String|jQuery|Array|Object] css selector or raw html, jQuery object, array [], object {}
minchar - [Integer] The minimum number of characters a user has to type before the autocompleter activates (default 1)
delay - [Integer] The delay in milliseconds the autocompleter waits after a keystroke to activate itself (default 50 miliseconds)
fillin - [Boolean] Pre-fill in (default false)
width - [Integer] width of autocomplete (default 200)
type - [String] type of server responce xml or json (default xml)
top - [Boolean] position of the list (default false to the bottom)
writable - [Boolean] allows to user write his own option (default true)
values - [Boolean] keep values for options (default false)
partial - [Boolean] makes request to server after each new letter (default false)

Events

onKeyPress - fires when user press a button
onSetup - fires once when autocomplit created
onSuggest - fires after onKeyPress but before ajax request send
onSuccess - fires when AJAX retuns result
onError - fires when AJAX retuns error
onDisplay - fires before list of items shows
onSelect - fires when user picks up from list

Dependences

jQuery - requires jQuery 1.2.6 or higher
bgiframe - use bgiframe if installed

YUI: autocomplete

CTAPbIu_MABP — Tue, 28 Nov 2006 14:25:06 +0000

Что такое AJAX, наверное, уже знают все. (кто не знает, идет гуглить), А что такое YUI я рассказывал в прошлой статье

Итак, автокомплит это технология, по которой данные взятые, например из аджакса (это совершенно не обязательно) предлагаются пользователю для быстрого заполнения полей формы. Например, пользователь пишет в поле "город" несколько букв - "Сан" ему будут предложены варианты "Санкт-Петербург", "Сан-Франциско" и "Сан Ремо" и пользователь быстро может выбрать мышкой или с клавиатуры то что ему нравится.

Проблема один - AJAX. Надо писать frontend (javascript) приложение, для клиента основанное на классе JsHttpRequest и backend (например, на php) приложение с запросом к БД

Проблема два нарисовать красивый выпадающий список с навигацией с клавиатуры. Проблема собственно у ослика (как обычно) потому что он не обрабатывает нажатие стрелочек в отличие от всех других браузеров.

Кстати, как и в прошлой статье, я отнюдь не говорю что это либа это панацея всех проблем! например, она очень тяжелая. Но раз я уже начал писать, а вы читать... продолжим

подключаем либу

и css


#ysearchmod {position:relative;padding:1em;}
#firstname_root {z-index:3000;} /* for IE z-index of absolute divs inside relative divs issue */
#secondname_root {z-index:2000;} /* for IE z-index of absolute divs inside relative divs issue */
#lastname_root {z-index:1000;} /* for IE z-index of absolute divs inside relative divs issue */
.yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
.ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
.yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
ul {padding:5px 0;width:100%;}
li {padding:0 5px;cursor:default;white-space:nowrap;}
li.yui-ac-highlight {background:#a0a0a0;}
li.yui-ac-prehighlight {background:pink;}

Для тех кто заметил что этот css сильно отличается от предлагаемого YAHOO объясняю - так как они описывают каждый элемент уже при трех полях на ajaxe css станет пухлым и дохлым поэтому я вынес его в JavaScript

И еще на заметку я буду предлагать заполнять ФИО

Последний штрих рисуем HTML



А теперь в тегах <_script>...<_/script> описываем загрузчик, он же frontend приложение


// определяем именное пространство
YAHOO.namespace("AutoComplete");
/*
Грубо говоря если вы определите YAHOO.namespace("XXX");
то следующая строчка будет выглядеть так
YAHOO.XXX = function(input){
*/

// конструктор
YAHOO.AutoComplete = function(input){
var oACDS;
var oAutoComp;
var oDiv = null;

	// CSS, вот сюда то я и вынес все излишнее свойства
	if (oDiv=document.getElementById(input))
	{
		var rDiv = document.getElementById(input+'_root');
		var cDiv = document.getElementById(input+'_conteiner');
		oDiv.style.position = "absolute";
		oDiv.style.width = "100%";
		rDiv.style.height = "2em";
		rDiv.style.position = "relative";
		rDiv.style.margin_bottom = "1.5em";
		rDiv.style.width = "100%";
		cDiv.style.position = "absolute";
		cDiv.style.top = "1.7em";
		cDiv.style.width = "100%";
	}


    // заполняем первый объект oACDS, он у нас отвечает за AJAX
    // адресс backend'a с параметрами
    oACDS = new YAHOO.widget.DS_XHR("/backend.php", ["n", "t"]);
    // вид ответа - простой текст - по одному варианту на строку
    oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
    // кеширование
   oACDS.queryMatchSubset = true;
    // время кеширования 60 сек
    oACDS.maxCacheEntries = 60;

    // этот параметр отвечает за дополнительные параметры в url, который запрашивается
    //тоесть вместо /backend.php данные будут посланы на /backend.php?active=имя_поля
    oACDS.scriptQueryAppend = '&active=' + input;

    //заполняем второй объект отвечающий за autocomplete, ему по большому счету нужно только имя поля в
    //котором должен работать скрипт
    oAutoComp = new YAHOO.widget.AutoComplete(input,input+'_conteiner', oACDS);
    // разделитель (по умолчанию дописывает в конце выбранного варианта ';')
    oAutoComp.delimChar = "";
    // задержка в секундах до отправки запроса
    oAutoComp.queryDelay = 0;
    // минимальная длина строки перед поиском
    oAutoComp.minQueryLength=1;
    // имя класса для выделенного варианта ответа
    oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
    // отключает автокомплит в браузере чтоб он не мешал
    oAutoComp.allowBrowserAutocomplete = false;
    // можно еще поизвращаться с анимацией, но это вы сделаете сами

};
//ну и собственно стартуем скрипт по разу на каждое поле
YAHOO.AutoComplete('firstname')


Теперь backend надо написать, да?!


// я полностью писать не буду, просто объясню. Данные из аджакса приходят в кодировке UCS-2BE поэтому 
// ее надо перекодировать в win-1251

// таблица символов
$unicode_to_cp1251_tbl = array(
	0x0402 => "x80",	0x0403 => "x81",	0x201A => "x82",	0x0453 => "x83",
	0x201E => "x84",	0x2026 => "x85",	0x2020 => "x86",	0x2021 => "x87",
	0x20AC => "x88",	0x2030 => "x89",	0x0409 => "x8A",	0x2039 => "x8B",
	0x040A => "x8C",	0x040C => "x8D",	0x040B => "x8E",	0x040F => "x8F",
	0x0452 => "x90",	0x2018 => "x91",	0x2019 => "x92",	0x201C => "x93",
	0x201D => "x94",	0x2022 => "x95",	0x2013 => "x96",	0x2014 => "x97",
	0x2122 => "x99",	0x0459 => "x9A",	0x203A => "x9B",	0x045A => "x9C",
	0x045C => "x9D",	0x045B => "x9E",	0x045F => "x9F",	0x00A0 => "xA0",
	0x040E => "xA1",	0x045E => "xA2",	0x0408 => "xA3",	0x00A4 => "xA4",
	0x0490 => "xA5",	0x00A6 => "xA6",	0x00A7 => "xA7",	0x0401 => "xA8",
	0x00A9 => "xA9",	0x0404 => "xAA",	0x00AB => "xAB",	0x00AC => "xAC",
	0x00AD => "xAD",	0x00AE => "xAE",	0x0407 => "xAF",	0x00B0 => "xB0",
	0x00B1 => "xB1",	0x0406 => "xB2",	0x0456 => "xB3",	0x0491 => "xB4",
	0x00B5 => "xB5",	0x00B6 => "xB6",	0x00B7 => "xB7",	0x0451 => "xB8",
	0x2116 => "xB9",	0x0454 => "xBA",	0x00BB => "xBB",	0x0458 => "xBC",
	0x0405 => "xBD",	0x0455 => "xBE",	0x0457 => "xBF",	0x0410 => "xC0",
	0x0411 => "xC1",	0x0412 => "xC2",	0x0413 => "xC3",	0x0414 => "xC4",
	0x0415 => "xC5",	0x0416 => "xC6",	0x0417 => "xC7",	0x0418 => "xC8",
	0x0419 => "xC9",	0x041A => "xCA",	0x041B => "xCB",	0x041C => "xCC",
	0x041D => "xCD",	0x041E => "xCE",	0x041F => "xCF",	0x0420 => "xD0",
	0x0421 => "xD1",	0x0422 => "xD2",	0x0423 => "xD3",	0x0424 => "xD4",
	0x0425 => "xD5",	0x0426 => "xD6",	0x0427 => "xD7",	0x0428 => "xD8",
	0x0429 => "xD9",	0x042A => "xDA",	0x042B => "xDB",	0x042C => "xDC",
	0x042D => "xDD",	0x042E => "xDE",	0x042F => "xDF",	0x0430 => "xE0",
	0x0431 => "xE1",	0x0432 => "xE2",	0x0433 => "xE3",	0x0434 => "xE4",
	0x0435 => "xE5",	0x0436 => "xE6",	0x0437 => "xE7",	0x0438 => "xE8",
	0x0439 => "xE9",	0x043A => "xEA",	0x043B => "xEB",	0x043C => "xEC",
	0x043D => "xED",	0x043E => "xEE",	0x043F => "xEF",	0x0440 => "xF0",
	0x0441 => "xF1",	0x0442 => "xF2",	0x0443 => "xF3",	0x0444 => "xF4",
	0x0445 => "xF5",	0x0446 => "xF6",	0x0447 => "xF7",	0x0448 => "xF8",
	0x0449 => "xF9",	0x044A => "xFA",	0x044B => "xFB",	0x044C => "xFC",
	0x044D => "xFD",	0x044E => "xFE",	0x044F => "xFF",
);

// функция поиска по таблице
function utf8_to_cp1251($s) {
	$tbl = $GLOBALS['unicode_to_cp1251_tbl'];
	$uc = 0;
	$bits = 0;
	$r = "";
	for($i = 0, $l = strlen($s); $i < $l; $i++)
	{
		$c = $s{$i};
		$b = ord($c);
		if($b & 0x80) 
		{
			if($b & 0x40)
			{
				if($b & 0x20) 
				{
					$uc = ($b & 0x0F) << 12;
					$bits = 12;
				} else {
					$uc = ($b & 0x1F) << 6;
					$bits = 6;
				}
			} else {
				$bits -= 6;
				if($bits)
				{
					$uc |= ($b & 0x3F) << $bits;
				} else {
					$uc |= $b & 0x3F;
					if($cc = @$tbl[$uc]) 
					{
						$r .= $cc;
					} else {
						$r .= '?';
					}
				}
			}
		} else {
			$r .= $c;
		}
	}
	return $r;
}

// применяем функцию ко всем входящим данным
foreach ($_REQUEST as $key => $value){
    $_REQUEST[$key] = utf8_to_cp1251($value);
}

// из всех данный нужно только 2
$like = $_REQUEST['query'];
$field = $_REQUEST['active'];

// соединяемся с БД
mysql_connect('localhost','user','pass');
mysql_select_db('namedatabase');

//Ну и собственно спрашиваем есть ли похожие имена
$sql = mysql_query("SELECT ".$field." AS suggestion FROM table_name WHERE ".$field." LIKE '$like%' ORDER BY ".$field."LIMIT 50");

// выводим списком ответ
while($result = mysql_fetch_assoc($sql)){
    echo $result['suggestion']."n";
}


Вот, пожалуй, и все. Кстати очень тяжелая (много килобайт весит) либа. Subsys от Котерова намного легче и практичнее, но не имеет автокомплита. Попытки втиснуть его туда насильно увенчались успехом только для FF1.5 и Opera8.0 , IE ругался