Shulou(Shulou.com)06/03 Report--

This article mainly introduces what the layui framework commonly used input box has, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

1. General input box input

* Field number 2, automatic completion input box

1. Make sure that the autoComplete plug-in is introduced into layui.

2. Make sure the initialization code runs in the callback function of layui.use.

3. Introduce baseUtility.js.

HTML

@ * record outlets * @ record outlets

Js data source initialization needs to be defined in the callback function of layui.use.

/ / filing site siteUtility.GetAllSiteByKey ("# txtRegisterCompanyId_searchForm", "# hiddenRegisterCompanyId_searchForm")

One is the id of the input box, and the other is the id of the hidden field. The GetAllSiteByKey public function is defined in baseUtility.js.

Get its value

/ / collect query form data var serializeForm = $("# searchForm") .formSerialize (true)

This serialization method can get the id value of the hidden domain.

Implementation method (reference)

/ * get all the outlets @ param txtElementId input box Id @ param hiddenElementId hidden field Id * / GetAllSiteByKey: function (txtElementId, hiddenElementId) {$(txtElementId). Typeahead ({minLength: 0, / / items: 'all', source: function (query, process) {var xdata = []; console.group (' query condition ='+ query) $.ajax ({type: "GET", url: urlEnum.GetAllSiteByKey, async: false, data: {"Q": query}, success: function (result) {console.info ('GetAllSiteByKey result'); console.info (result) If (result! = null & & result! = undefined) {$.each (result.list, function (I, item) {xdata.push ({id: item.value, name: item.key) Obj: item}) }); / / end each}}, error: function (XMLHttpRequest, textStatus, errorThrown) {/ / layer.msg ("data loading failed", {icon: 1});}, timeout: 5000}) Console.info ('Auto return value:'); console.info (xdata); / / if the Auto control is left empty by the user, the hidden field is also empty if ($(txtElementId). Val () = ") {$(hiddenElementId) .val (");} console.groupEnd () Return process (xdata);}, updater: function (item) {console.info ('updater =' + item); console.info (item); $(hiddenElementId) .val (item.id); return item;}}); / / end typeahead} III. Assignment

Whether the input box is normal or automatic, it can be assigned directly.

/ / record site $("# txtRegisterCompanyId_editForm") .val (registerCompanyName); Thank you for reading this article carefully. I hope the article "what are the common input boxes in the layui framework shared by the editor is helpful to everyone?" at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.