1. Загрузите jquery-latest.js, JSuggest.js и JSuggest.css.
Исходный код JSuggest.js выглядит следующим образом.
Скопируйте код кода следующим образом:
/**
*
* Описание: раскрывающееся окно подсказки JSuggest.
*/
функция JSuggest(){
// раскрывающийся список DIV
this.div = ноль;
//ул под DIV
this.ul = ноль;
//Поле ввода текста
this.input = ноль;
// объект LI, выбранный текущим DIV
this.current_li = ноль;
/**
* Скрыть раскрывающееся окно подсказки
*/
this.hide = функция(){
this.div.style.visibility = "скрытый";
}
/**
* Показать раскрывающееся окно подсказки
*/
this.show = функция(){
this.div.style.visibility = "видимый";
}
/**
* Статус раскрывающегося окна подсказки
*/
this.status = функция(){
if (this.div.style.visibility == "видимый"){
вернуть истину;
}
вернуть ложь;
}
/**
* Установите LI, выбранный текущим DIV.
*/
this.setCurrent_li = функция (li, obj) {
вар со = obj.current_li;
если (со != ноль){
co.className = "";
}
li.className = "li_index";
obj.current_li = ли;
}
/**
* Инициализировать предложение
*
* input_id: идентификатор поля ввода.
* defHeight: высота раскрывающегося окна подсказки (вы также можете ее не указывать)
*/
this.init = функция (input_id, defHeight) {
this.input = document.getElementById(input_id);
//this.input.autocomplete = "выключено";
вар слева = this.input.offsetLeft;
вар топ = this.input.offsetTop;
вар ширина = this.input.offsetWidth;
вар высота = this.input.offsetHeight;
вар p=this.input.offsetParent;
в то время как (р! = ноль) {
влево+=p.offsetLeft;
топ+=p.offsetTop;
p=p.offsetParent;
}
верх+= высота;
if(defHeight==null || defHeight==0){
высота = 150;
}еще{
высота = defHeight;
}
this.input.value = "";
вар объект = это;
this.input.onkeydown = функция (evt) {
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = ширина + «пикселей»;
this.div.style.height = высота + «пикселей»;
this.div.style.left = влево + «px»;
this.div.style.top = верх + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}
/**
* Удалить все LI в UL под DIV.
*/
this.remove = функция(){
this.current_li = ноль;
в то время как (this.removeLI());
}
/**
* Удалить LI в UL под DIV.
*/
this.removeLI = функция(){
вар узел = this.ul.childNodes;
for(var n в узле){
if (node[n] != null && node[n].nodeName == "LI"){
// оповещение(узел[n].innerHTML);
this.ul.removeChild(узел [n]);
вернуть истину;
}
}
вернуть ложь;
}
/**
* Создать LI в DIV
*/
this.create = функция(элементы){
это.удалить();
var li_item = items.split(",");
for(var я в li_item){
//оповещение(li_item[i]);
вар li = document.createElement("li");
li.innerHTML = li_item[i];
вар объект = это;
li.onmousedown = функция(){
obj.onmousedown(это, объект);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
это.шоу();
}
/**
* Пресс-конференция в текстовом поле
*/
this.onkeydown = функция (evt, obj) {
если (!obj.status()){
вернуть ложь;
}
if (!evt && window.event)
{
evt = окно.событие;
}
ключ вар = evt.keyCode;
//вар KEYUP = 38;
//вар KEYDOWN = 40;
//вар KEYENTER = 13;
вар ОБ = ОБЪЕКТ;
если (ключ == 38){
obj.upKeySelected();
}иначе если (ключ == 40){
obj.downKeySelected();
}иначе если (ключ == 13 || ключ == 27){
объект.скрыть();
}
}
this.getCurrentLiIndex = функция(){
если (this.current_li == ноль) {
вернуть -1;
}
вар узел = this.ul.childNodes;
for(var n в узле){
if (node[n].nodeName == "LI"){
если (узел [n] == this.current_li) {
вернуть н;
}
}
}
}
this.getLi = функция(индекс){
вар узел = this.ul.childNodes;
for(var n в узле){
if (node[n].nodeName == "LI" && n == индекс){
this.setCurrent_li(узел [n], это);
вернуть узел [n];
}
}
}
this.upKeySelected = функция(){
var num = this.getCurrentLiIndex();
если (число!= -1 && число > 0){
число--;
вар узел = this.getLi(num);
this.setCurrent_li(узел, это);
this.input.value = node.innerHTML;
}
}
this.downKeySelected = функция (obj) {
var num = this.getCurrentLiIndex();
если (число == -1){
число = 0;
}еще {
число++;
if (num >= this.ul.childNodes.length) вернет false;
}
вар узел = this.getLi(num);
this.setCurrent_li(узел, это);
this.input.value = node.innerHTML;
}
/**
* Событие нажатия мыши DIV
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(этот, объект);
obj.input.value = thiz.innerHTML;
объект.скрыть();
}
/**
* Событие движения мыши DIV
*/
this.onmouseover = функция(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* Событие выхода мыши из DIV
*/
this.onmouseout = функция(){
if (this.className == "li_check"){
this.className = "";
}
}
}
вар jsuggest = новый JSuggest ();
2.jsp-страница
Скопируйте код кода следующим образом:
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<тип сценария="текст/javascript">
j(документ).ready(функция(){
//Инициализируем JSUGGEST
jsuggest.init("текст");
//Или используйте следующий метод, чтобы установить высоту раскрывающегося списка
//jsuggest.init("текст",200);
})
функция go(событие, значение){
событие = событие? событие: (окно.событие? окно.событие: аргументы[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url — это конкретное действие или адрес jsp и т. д., а возвращаемое значение — это строка, разделенная запятыми
goSuggestInput (событие, URL, значение);
}
функция goSuggestInput(evnet,url,value){
если (значение == ""){
//Скрываем раскрывающийся список, если поле ввода пусто
jsuggest.hide();
вернуть ложь;
}
// Убедитесь, что evt является допустимым событием
if (!evnet && window.event)
{
evnet = window.event;
}
ключ вар = evnet.keyCode;
if (ключ == 38 || ключ == 40 || ключ == 13 || ключ == 27){
вернуть ложь;
}
j.ajax({
тип: "пост",
URL: URL,
Тип данных: «текст»,
кеш: «ложь»,
beforeSend: функция (XMLHttpRequest) {
},
успех: функция (данные, textStatus) {
//Добавляем данные в раскрывающийся список
jsuggest.create(данные);
},
завершено: функция (XMLHttpRequest, textStatus) {
},
ошибка: функция(){
alert("К сожалению, сервер занят!");
}
});
}
</скрипт>