Recientemente, el proyecto involucra una pequeña característica. /Pinyin, ingrese automáticamente las consultas de la base de datos y devuelva el resultado correspondiente para generar Datalist. más conveniente. El código delantero es el siguiente:
Código HTML:
<! Equiv = x-ua-compatible> <meta name = viewport content = width = dispositivo-width, inicial-escale = 1.0> <meta name = descripción content => <meta name = autor content => <script src = ../ . Vascript> </script> <script src = .././common/js/js/ajaxjson.js type = text/javascript> </script> <script src = ../common/js/setting.js type = Text/javascript> </script> <script src = ../common/js/paging.js type = text/javascript> </script> <script src = ../../warehousageage/testyy .js type = text = text /Javascript> </script> </head> <body class => <!-<! class = Content> <Div class = Header> <H1 id = ADU class = Page-title> Test de caja desplegable </h1> </div> <div class = Container-fluid> <Div classs = Row-fluid> <!--------------------------- 多条件查询 ------------ ----- -------------------------------------> <Div class = Well id = SearchDemo> <p> Datos de prueba (el valor predeterminado es D00001): <br> Kunshan Continland Accessories Co., Ltd. Ksdlpjyxgs <br> Yizhen Enterprise Co., Ltd. Yzqyyxgs <br> Taizhou Anshing Bearing Skin Factory (Group Factory) TzSatzpc (JTC) <///////////////////// taizhou Factory de la piel (fábrica grupal) P> </div> coincidencia dinámica de acuerdo con el nombre del proveedor (puede estar disponible chino o pinyin): <input list = bro id = name onInput = this.value = this.value.replace (/^ +| +$/g , ''); --------------------------------- ----------------- Puente ---------------------------> <Footer class = Foot> </footer> </html>
Código JavaScript:
Var listobj = null; // objeto dataList var requestitem = null; I ID de etiqueta Id * dataListid: ID * El nombre de elemento de las etiquetas de datos DataList: el valor clave requerido en los datos JSON devueltos en segundo plano (solo el nombre del atributo del campo chino en el formulario) * */ Función Search (inputID, DataListid, ItemName ) {input) content = document .getElementById (inputID); Nodos de niños; InputContent.Value = NULL; // 检测出是拼音首字母 data = type = SearchWords¶m = +InputContent.Value; / Nota: URL ---------------------------------------------- -------------------------------------------------- ----------------------------------- getResult);} else if (/^[/u4e00-// u4e00-/u9fa5]*$/. test (inputContent.Value)) {// 检测出是中文 data = type = searchChinese¶m =+inputContent.Value ; // 注意 ： ----------- 需要自定义 URL = BaseUrl + /Servlet /ListDemo; post, url, datos, getResult); garantiza solo 10 if (jData.length <= 10) {maxLength = jData.length;} var sub = listObj.childNodes; (sub [i]); Borrar el valor del cuadro de entrada en el cuadro de entrada; ^[A-ZA-Z]*$/. Alue)) {obj.value = indexObj [requestem];} listobj.appendChild (obj);} var subfix = document.createElement (opción); ;La anterior es la coincidencia dinámica del nuevo DataList de etiqueta HTML5 para implementar el cuadro de entrada y los datos de la base de datos. a tiempo. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!