В реальных проектах лучше всего использовать плагины, написанные другими для реализации связанных функций. Однако для того, чтобы сэкономить время и стоимость, некоторые проекты более неотложны и не имеют достаточно времени, чтобы написать самостоятельно. Даже если вы пишете, вам все равно придется тратить много времени на отладку совместимости. Тем не менее, для обучения вы можете использовать свое свободное время, чтобы написать самостоятельно, прочитать некоторые нативные вещи JS и создавать плагины в соответствии с вашими собственными идеями, чтобы вы могли улучшить свой уровень.
Говоря об Autotemplete, многие люди использовали его. Обратитесь к Autotemplete.js, а затем вы можете реализовать опцию раскрытия приглашения при введении значений в поле ввода. Он похож на оперативную функцию поиска Baidu. Давайте поговорим о ваших собственных идеях.
Добавить событие ввода в поле ввода
1. Код совместимости события ввода заключается в следующем:
AddEvt: function (ele, evt, fn) {if (document.addeventlistener) {ele.addeventListener (evt, fn, false); } else if (document.attachevent) {ele.attachevent ('on' + (evt == "input"? "PropertyChange": evt), fn); } else {ele ['on' + (evt == "input"? "PropertyChange": evt)] = fn; }}Событие ввода отличается от других событий. Нижняя версия IE не поддерживает входные события и может использовать только события PropertyChange. Высшая версия IE и W3C Standard Browsers поддерживает события ввода.
2. Получите данные при запуска входного события
Здесь есть две формы данных, одна - это массив объектов прямого набора, а другая - запрос AJAX, чтобы вернуть данные
В настоящее время нам нужна функция запроса Ajax, и здесь записан запрос GET
get: function (url, paraobj, fn, timeout) {var xhr = null; try {///// совместимый с Firefox, Chrom if (window.xmlhttprequest) {xhr = new xmlhttprequest (); } /////// Совместим с IE else if (window.activexobject) {xhr = new activexobject ("msxml2.xmlhttp"); }} catch (e) {// todo обрабатывать исключение xhr = new activexobject ('microsoft.xmlhttp'); } xhr.onreadyStateChange = function () {if (this.ReadyState == 4 && this.status == 200) {fn.call (this, this.responsetext); } else {setTimeout (function () {xhr.Abort ();}, timeout); }}; var parastr = ''; parastr += "?"; for (var prop in paraobj) {parastr + = prop + "=" + paraobj [prop] + "&"; } xhr.open ('Get', Parastr! = "?" (url + parastr): url, true); xhr.send (); }3. Когда запрос Ajax успешен и есть данные, создайте раскрывающуюся поле и добавьте параметры в раскрывающуюся поле //// Создать раскрывающееся div
Создайте код раскрывающейся коробки:
CreateShowDiv: function () {/// Если раскрывающийся div уже существует, удалите var parentnode = this.autoelement.parentnode || this.AutoElement.Parentelement; var Childnodes = parentnode.childnodes; var showdiv = document.getElementbyId (this.config.showdivid); if (showdiv) {parentnode.removechild (showdiv); } // Создать раскрывающегося div var div = document.createElement ('div'); div.id = this.config.showdivid; // Установить раскрывающуюся Div Style var style = this.config.style || {ширина: '200px', высота: 'auto', founalcolor: '#1c5683', cursor: 'pointer', display: 'block'}; <br> для (var prop в стиле) {div.style [prop] = style [prop]; } this.showdiv = div; }Приложение кода опции:
appendChild: function (data) {var self = this; var data = data; var fragment = document.createdocumentfragment (); for (var i = 0; i <data.length; i ++) {var obj = data [i]; var Child = document.createElement ('div'); child.style.width = self.showdiv.style.width; child.style.border = '1px'; Child.style.borderstyle = 'Solid'; child.style.bordertopcolor = 'white'; child.setattribute ('key', obj [self.config.valuefilled]); child.innerhtml = obj [self.config.textfiled]; fragment.appendchild (ребенок); } self.showdiv.appendchild (фрагмент); self.util.insertafter (self.showdiv, self.AutoElement); // Добавить событие Click для раскрывающегося блока self.util.addevt (self.showdiv, 'click', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target. self.config.select.call (self, key, val); }Вышесказанное - несколько основных идей. Теперь давайте посмотрим, как инкапсулировать эти коды в объект и сделать их плагином. В это время мы используем анонимное закрытие:
(function (win) {var autoCOMPLETE = function () {this.Init.Apply (this, arguments);} autoCOMPLETE.Prototype = {//// Добавить соответствующий код операции Инициал: {}, /// Параметры инициализации DivendChild: {}, CreateShowDiv: {}, /// Create Divend Div AddPendCHILD: {{{///viciv: // wispend. {}, //// Закрыть раскрывающуюся коробку /////////////mount objects, события, запросы и функции для Operations node node util: {addevt: {}, /// Добавить событие insertafter: {}, /// Добавить элемент после определенного элемента get: {} ///// Ajax get Quest}} win.AtocOmoCOB AutoComplete (paraobj) .render ();}}) (окно)Основной код был добавлен, и мы отобразим конкретный код реализации:
(function (win) {var autoCoplete = function () {this.init.apply (this, arguments);} autoCOMPLETE.Prototype = {init: function () {var args = array.prototype.slice.call (аргументы); if (args && args.length> 0) {var config = args [0]; (config && getType.call (config) == "[Object Object]") {// this.config = config; URL: '', // Ajax запрашиваемая паранам: «Имя», // AJAX Запрашивается параметр Выбрать: function () {}, // Событие, запускаемое при выборе параметров, ShowDiv: '' // Отвратитесь, чтобы выбрать идентификатор области}; Document.getElementById (self.config.id); paraobj = {}; if (self.config.url && sell.config.data) {self.createShowdiv (); CreateShowdiv: function () {/// Если раскрывается div, Delete the var parentnode = this.autoelement.parentnode || ParentNode.RemoveChild (ShowDiv); Дисплей: «Блок»; = data [i]; obj [self.config.valuefiled]; self.util.addevt (self.showdiv, 'click', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getattribute ("key"); var val = target. self.config.select.call (self, key, val); ELE.AddeventListener (evt, fn, false); INSERTAFTER: FUNCTION (ELE, TARGETELE) {var parentnode = targetele.parentnode || fn, тайм -аут) {var xhr = null; ActiveXobject ('microsoft.xmlhttp'); '; AutoComplete (paraobj) .render ();}}) (окно)Ниже используется код
Страница звонок
window.onload = function () {autoCoplete ({id: 'txttest', // url управления: '/home/test4', // паранам данных: 'name', textfiled: 'name', // attribute Имя отображенного текста: 'id', // Получить имя атрибут значения // {}, // stile settings: 'wylphout:' '/}, // стиль настройки. // Ajax запрошен URL Select: Function (val, Text) {alert (val + '---' + text); }); }Фоновый код выглядит следующим образом, здесь я использую MVC
public jsonResult test4 (string name) {var list = new List <Tood> (); list.add (новый студент {id = "1", name = "aaaaa"}); list.add (новый студент {id = "2", name = "aacc"}); list.add (новый студент {id = "3", name = "aabb"}); list.add (новый студент {id = "4", name = "bbcc"}); if (! String.isnullorempty (name)) {list = list.where (p => p.name.contains (name)). tolist (); } return json (list, jsonrequestbehavior.allowget);}Теперь, когда базовая реализация функции и вызов завершены, процесс с начала до конца довольно хлопот. Каждый метод реализуется шаг за шагом, не ссылаясь на другие библиотеки, и необходимо учитывать совместимость каждого браузера.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.