Используйте JavaScript, чтобы создать текстовое поле с автоматическими подсказками. Друзья, которым это нужно, могут обратиться к нему. Пример 1: Напишите реализацию AJAX напрямую.
Клиент:
Скопируйте код кода следующим образом:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<голова>
<title>Ajax реализует автоматическое текстовое поле подсказки</title>
<стиль>
<!--
тело{
семейство шрифтов: Arial, Helvetica, без засечек;
размер шрифта: 12 пикселей; отступ: 0 пикселей;
}
форма {отступ: 0 пикселей; маржа: 0 пикселей;}
вход{
/* Стиль поля пользовательского ввода */
семейство шрифтов: Arial, Helvetica, без засечек;
размер шрифта: 12 пикселей; граница: 1 пиксель сплошной # 000000;
ширина: 200 пикселей; отступ: 1 пиксель; поле: 0 пикселей;
}
#неожиданно возникнуть{
/* Стиль блока div окна подсказки */
позиция: абсолютная ширина: 202 пикселей;
цвет: # 004a7e, размер шрифта: 12 пикселей;
семейство шрифтов: Arial, Helvetica, без засечек;
слева: 41 пикселей; сверху: 25 пикселей;
}
#popup.show{
/* Отображение границы поля подсказки */
граница: 1 пиксель, сплошной #004a7e;
}
#popup.hide{
/* Скрываем границу поля подсказки*/
граница: нет;
}
/* Стиль окна подсказки*/
ул {
стиль списка: нет;
поле: 0 пикселей; отступ: 0 пикселей;
}
li.mouseOver{
цвет фона: # 004a7e;
цвет:#FFFFFF;
}
li.mouseOut{
цвет фона: #FFFFFF;
цвет: # 004a7e;
}
-->
</стиль>
<язык сценария=javascript>
var oInputField; //Учитывая, что он используется во многих функциях
var oPopDiv; //Так это в виде глобальной переменной
вар oColorsUl;
вар xmlHttp;
функция createXMLHttpRequest(){
если (окно.ActiveXObject)
xmlHttp = новый ActiveXObject(Microsoft.XMLHTTP);
иначе, если (window.XMLHttpRequest)
xmlHttp = новый XMLHttpRequest();
}
функция initVars(){
//Инициализируем переменные
oInputField = document.forms[myForm1].colors;
oPopDiv = document.getElementById(всплывающее окно);
oColorsUl = document.getElementById(colors_ul);
}
функция ClearColors(){
//Очистить содержимое приглашения
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = скрыть;
}
функция setColors(the_colors){
//Отображаем окно подсказки, и передаваемый параметр представляет собой массив, состоящий из совпадающих результатов.
ClearColors(); //Каждый раз, когда вы вводите букву, очищайте исходное приглашение, прежде чем продолжить.
oPopDiv.className = показать;
вар оЛи;
for(var i=0;i<the_colors.length;i++){
//Отображение результатов сопоставления пользователю один за другим
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = функция(){
this.className = mouseOver; //Выделяем, когда курсор мыши проходит мимо
}
oLi.onmouseout = функция(){
this.className = mouseOut; //Восстанавливаем исходное состояние при выходе
}
oLi.onclick = функция(){
//Когда пользователь нажимает на соответствующий элемент, установите в поле ввода значение элемента
oInputField.value = this.firstChild.nodeValue;
ClearColors(); //Одновременно очищаем окно подсказки
}
}
}
функция findColors(){
initVars(); //Инициализируем переменные
если (oInputField.value.length > 0) {
createXMLHttpRequest(); //Отправляем пользовательский ввод на сервер
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + new Date().getTime();
xmlHttp.open(GET,sUrl,true);
xmlHttp.onreadystatechange = функция () {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
вар aResult = новый массив();
если (xmlHttp.responseText.length) {
aResult = xmlHttp.responseText.split(,);
setColors(aResult); //Отображение результатов сервера
}
еще
ОчиститьЦвета();
}
}
xmlHttp.send (нуль);
}
еще
ClearColors(); // Очищаем окно подсказки, когда нет ввода (например, пользователь нажимает клавишу Del)
}
</скрипт>
</голова>
<тело>
<метод формы=имя сообщения=myForm1>
Цвет: <тип ввода=имя текста=цвета id=цвета onkeyup=findColors() />;
</форма>
<div id=всплывающее окно>
<ul id=colors_ul></ul>
</div>
</тело>
</html>
Серверная часть (9-10.aspx):
Скопируйте код кода следующим образом:
<%@ Page Language=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Import Namespace=System.Data %>
<%
Response.CacheControl = без кэша;
Response.AddHeader(Pragma,без кэша);
строка sInput = Request[sColor].Trim();
если (sInput.Length == 0)
возвращаться;
строка sResult = ;
строка[] aColors = новый string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,латунь,бронза,коричневый,берливуд,cadetblue,шартрез,шоколад,медь,коралл,cornfloewrb Lue, кукурузный шелк, голубой, темно-синий, темно-голубой, темно-золотистый, темно-серый, темно-зеленый, дархаки, темно-пурпурный, темно-пурпурный, темно-красный, темно-синий, темно-синий, темно-красный, темно-салмон, темно-зеленый, темно-синий, темно-шифер серый, темно-бирюзовый, темно-фиолетовый, темно-розовый, темно-синий, тусклый, dodgerblue, полевой шпат, огнеупорный кирпич, цветочный белый, лесно-зеленый, фуксия, гейнсборо, золотой, золотарник, голенрод, gostwhite, серый, зеленый, зеленый желтый, падевая роса, ярко-розовый, индийский красный, инен, слоновая кость, хаки, лаванда, лавандовый румянец, газонно-зеленый, лимонно-шифоновый, светло-голубой, светло-коралловый, светло-голубой, светло-годенрод, светло-годенрод желтый, светло-серый, светло-зеленый, л светло-розовый, светло-лососевый, светлый морской зеленый, светло-голубой, светлый сланец, светлый шиферный серый, светло-стальной синий, светло-желтый, салатовый, салатовый, пурпурный, пурпурный, марум, бордовый, средний аквамарин, средний синий, меди umorchid,mediumpurpul,mediumморезеленый,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,мятно-кремовый,mistyrose,moccasin,navajowhite,темно-синий,темно-синий,oldlace,oli ведраб,оранжевый,орхидея,оранжевый,палегоденрод,бледнозеленый,палебирюзовый,палевиолетред,папаявип,персиковый,перу,розовый,слива,пудросиний,фиолетовый,кварц,красный,розово-коричневый,королевский синий,седлокоричневый,сал понедельник,песчано-коричневый,алый,морской зеленый,морская ракушка,сиена,серебристый,небесно-голубой,сланцево-серый,снежный,весенний зеленый,стально-синий,загар,чертополох,помидор,бирюзовый,фиолетовый,фиолетово-красный,пшеница,белый дым,желтый,желтозеленый};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //Если есть совпадение
sResult = sResult.Substring(0,sResult.Length-1); //Удаляем последнее число;
Ответ.Запись(sResult);
%>
Пример 2: реализовано с помощью jQuery.
Клиент:
Скопируйте код кода следующим образом:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<голова>
<title>JQuery реализует автоматическое текстовое поле подсказки</title>
<стиль>
<!--
тело{
семейство шрифтов: Arial, Helvetica, без засечек;
размер шрифта: 12 пикселей; отступ: 0 пикселей;
}
форма {отступ: 0 пикселей; маржа: 0 пикселей;}
вход{
/* Стиль поля пользовательского ввода */
семейство шрифтов: Arial, Helvetica, без засечек;
размер шрифта: 12 пикселей; граница: 1 пиксель сплошной # 000000;
ширина: 200 пикселей; отступ: 1 пиксель; поле: 0 пикселей;
}
#неожиданно возникнуть{
/* Стиль блока div окна подсказки */
позиция: абсолютная ширина: 202 пикселей;
цвет: # 004a7e, размер шрифта: 12 пикселей;
семейство шрифтов: Arial, Helvetica, без засечек;
слева: 41 пикселей; сверху: 25 пикселей;
}
#popup.show{
/* Отображение границы поля подсказки */
граница: 1 пиксель, сплошной #004a7e;
}
/* Стиль окна подсказки*/
ул {
стиль списка: нет;
поле: 0 пикселей; отступ: 0 пикселей;
цвет: # 004a7e;
}
li.mouseOver{
цвет фона: # 004a7e;
цвет:#FFFFFF;
}
-->
</стиль>
<script Language=javascript src=jquery.min.js></script>
<язык сценария=javascript>
var oInputField; //Учитывая, что он используется во многих функциях
var oPopDiv; //Так это в виде глобальной переменной
вар oColorsUl;
функция initVars(){
//Инициализируем переменные
oInputField = $(#colors);
oPopDiv = $(#popup);
oColorsUl = $(#colors_ul);
}
функция ClearColors(){
//Очистить содержимое приглашения
oColorsUl.empty();
oPopDiv.removeClass(показать);
}
функция setColors(the_colors){
//Отображаем окно подсказки, и передаваемый параметр представляет собой массив, состоящий из совпадающих результатов.
ClearColors(); //Каждый раз, когда вы вводите букву, очищайте исходное приглашение, прежде чем продолжить.
oPopDiv.addClass(показать);
for(var i=0;i<the_colors.length;i++)
//Отображение результатов сопоставления пользователю один за другим
oColorsUl.append($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).click(function(){
oInputField.val($(this).text());
ОчиститьЦвета();
}).hover(
function(){$(this).addClass(mouseOver);},
function(){$(this).removeClass(mouseOver);}
);
}
функция findColors(){
initVars(); //Инициализируем переменные
if(oInputField.val().length > 0){
//Получаем асинхронные данные
$.get(14-10.aspx,{sColor:oInputField.val()},
функция(данные){
вар aResult = новый массив();
если (data.length > 0) {
aResult = data.split(,);
setColors(aResult); //Отображение результатов сервера
}
еще
ОчиститьЦвета();
});
}
еще
ClearColors(); // Очищаем окно подсказки, когда нет ввода (например, пользователь нажимает клавишу Del)
}
</скрипт>
</голова>
<тело>
<метод формы=имя сообщения=myForm1>
Цвет: <тип ввода=имя текста=цвета id=цвета onkeyup=findColors() />;
</форма>
<div id=всплывающее окно>
<ul id=colors_ul></ul>
</div>
</тело>
</html>
Серверная часть (14-10.aspx):
Скопируйте код кода следующим образом:
<%@ Page Language=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ Import Namespace=System.Data %>
<%
Response.CacheControl = без кэша;
Response.AddHeader(Pragma,без кэша);
строка sInput = Request[sColor].Trim();
если (sInput.Length == 0)
возвращаться;
строка sResult = ;
строка[] aColors = новый string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,латунь,бронза,коричневый,берливуд,cadetblue,шартрез,шоколад,медь,коралл,cornfloewrb Lue, кукурузный шелк, голубой, темно-синий, темно-голубой, темно-золотистый, темно-серый, темно-зеленый, дархаки, темно-пурпурный, темно-пурпурный, темно-красный, темно-синий, темно-синий, темно-красный, темно-салмон, темно-зеленый, темно-синий, темно-шифер серый, темно-бирюзовый, темно-фиолетовый, темно-розовый, темно-синий, тусклый, dodgerblue, полевой шпат, огнеупорный кирпич, цветочный белый, лесно-зеленый, фуксия, гейнсборо, золотой, золотарник, голенрод, gostwhite, серый, зеленый, зеленый желтый, падевая роса, ярко-розовый, индийский красный, инен, слоновая кость, хаки, лаванда, лавандовый румянец, газонно-зеленый, лимонно-шифоновый, светло-голубой, светло-коралловый, светло-голубой, светло-годенрод, светло-годенрод желтый, светло-серый, светло-зеленый, л светло-розовый, светло-лососевый, светлый морской зеленый, светло-голубой, светлый сланец, светлый шиферный серый, светло-стальной синий, светло-желтый, салатовый, салатовый, пурпурный, пурпурный, марум, бордовый, средний аквамарин, средний синий, меди umorchid,mediumpurpul,mediumморезеленый,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,мятно-кремовый,mistyrose,moccasin,navajowhite,темно-синий,темно-синий,oldlace,oli ведраб,оранжевый,орхидея,оранжевый,палегоденрод,бледнозеленый,палебирюзовый,палевиолетред,папаявип,персиковый,перу,розовый,слива,пудросиний,фиолетовый,кварц,красный,розово-коричневый,королевский синий,седлокоричневый,сал понедельник,песчано-коричневый,алый,морской зеленый,морская ракушка,сиена,серебристый,небесно-голубой,сланцево-серый,снежный,весенний зеленый,стально-синий,загар,чертополох,помидор,бирюзовый,фиолетовый,фиолетово-красный,пшеница,белый дым,желтый,желтозеленый};
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ,;
}
if(sResult.Length>0) //Если есть совпадение
sResult = sResult.Substring(0,sResult.Length-1); //Удаляем последнее число;
Ответ.Запись(sResult);
%>