制作类似 google 下拉框的用户自定义控件的实现思路及代码参考

最新推荐文章于 2019-10-27 17:07:28 发布

E8-苏康胜

最新推荐文章于 2019-10-27 17:07:28 发布

阅读量869

点赞数

文章标签： google autocomplete null textbox javascript 企业应用

本文链接：https://blog.csdn.net/cancan28/article/details/2301328

版权

本文介绍了一种实现类似Google搜索下拉框效果的用户自定义控件的思路和代码。通过组合TextBox、DIV和SELECT控件，结合JavaScript事件处理，如onkeydown和onmouseover，动态调整DIV和SELECT的位置及内容，提高用户输入体验。提供的代码示例展示了如何创建和响应用户输入，以及如何从XML数据加载选项。

摘要由CSDN通过智能技术生成

如果做如下效果:

     听很多人说过 google 输入条件下拉筐输入时,自动出现一些匹配的信息,这种模式相当不错.

    E8.Net架构中已经把种输入模式做成了控件,帮助系统改善各种录入项的用户体验.

    实现思路是:
      1、组合一个 TextBox 控件、一个DIV 控件及一个 SELECT | OPTION 控件
      2、通过javascript动态指定 DIV控件的位置及 SELECT |OPTION 控件的 options 内容
      3、通过一些事件脚本 onkeydown onmouseover....实现一些效果

    代码参考：

< input name = ' itemname ' autocomplete = " off " id = ' itemname ' value = '' onkeydown = " focusToDropDown('itemsForDropdown') " onkeyup = " getItemsForDropdown('itemsForDropdownLayer','itemsForDropdown','itemname','hidXml',this); " />

< div id = ' itemsForDropdownLayer ' onmouseover = " MoverToDropDownLayer('itemsForDropdown'); " style = ' display: none; position:absolute; width:120px; left: 120; top: 90; z-index:2 '

onmouseout = " hideMe('itemsForDropdownLayer','none'); " >

< select id = ' itemsForDropdown ' class = " combo-list " onkeydown = " selectOnReturn('itemsForDropdownLayer','itemname',this); " onclick = " getSelectedLabel('itemsForDropdownLayer','itemname',this); "