<HTML>
<HEAD>
<TITLE>editable dropdown</TITLE>
</HEAD>
<BODY>
<table border="5" cellspacing="5" bordercolor="#00DF55" bgcolor="#A0A0A4">
<tr>
<td width="183"> </td><br>
<td width="248"> </td></tr>
<tr>
<td> </td><br>
<td><label id="labelObj"></label><select id="selectObj" style="position:absolute;top:10px; left:10px;"
onchange=textObj.value=this.options[this.selectedIndex].value >
<OPTION value="" selected>选择邮箱</OPTION> <OPTION
value=sina.com>sina.com</OPTION> <OPTION
value=sohu.comsohu.com123456478946>sohu.com1234564789</OPTION> <OPTION
value=tom.com>tom.com</OPTION> <OPTION
value=126.com>126.com</OPTION> <OPTION
value=163.com>163.com</OPTION> <OPTION
value=yahoo.com.cn>yahoo.com.cn</OPTION> <OPTION
value=kingsoft.com>kingsoft.com</OPTION></SELECT>
<input type="text" id="textObj" style=" top:10px; left:10px; background-color:#00FF00"">
</td>
</tr>
<tr>
<td> </td>
<td> </td></tr>
<tr>
<td> </td>
<td> </td></tr>
</table>
</BODY> <script language="javascript">
function test() {
var selectObj1 = document.getElementById("selectObj");
var textObj1 = document.getElementById("textObj");
var topObj = document.getElementById("labelObj");
var topSize = 0;
var leftSize = topObj.offsetLeft;
while (topObj.offsetParent != null) {
topSize+=topObj.offsetParent.offsetTop;
leftSize+=topObj.offsetParent.offsetLeft;
topObj = topObj.offsetParent;
}
selectObj1.style.width = selectObj1.clientWidth;
textObj1.style.width = selectObj1.clientWidth-18;
try{
selectObj1.style.top = topSize+3;
selectObj1.style.left = leftSize+1;
leftSize += selectObj1.clientWidth;
selectObj1.style.clip="rect(0px, "+leftSize+", "+selectObj1.clientHeight+", "+textObj1.style.width+")";
} catch (e){alert(e);}
}
test();
</script>
</HTML>
分享到：
相关推荐
一种常见的方法是创建一个组合控件，包含一个输入框和一个下拉列表。当用户开始在输入框中输入时，下拉列表会动态过滤出匹配的选项。用户可以选择列表中的一个项，或者继续输入以创建新的值。这种设计通常需要监听...
自制的jquery插件，只需要一行代码，即可将select控件变成一个即可以输入也可以选择的元素，输入时也会有智能提示。对原来的select的操作完全没有改变，取值依然是取select的值，设置选中，添加项删除项等等都没有...
4. 现代前端框架实现：如果是React、Vue等框架，会涉及组件化编程思想，以及如何创建一个自定义的可输入select组件。 5. 数据处理：如何存储和管理用户输入的数据，以及如何根据用户输入实时过滤和显示选项。 6. ...
首先，我们创建一个基础的HTML结构，包括一个`<input>`文本框和一个隐藏的`<select>`元素。`<input>`将用于用户输入自定义文本，而`<select>`则用于存储预设的选项。例如： ```html <div class="select-edit-...
数据源中的每个项应包含一个或多个字段用于匹配用户输入。 2. **匹配算法**：控件可以配置匹配策略，比如基于用户输入的前缀、模糊匹配或者完全匹配。 3. **自定义渲染**：通过回调函数，你可以定制每个选项的展示...
在源码层面，开发者可能会创建一个自定义组件，该组件包含一个隐藏的`<select>`元素和一个可见的`<input>`元素。`<input>`用于用户输入，而`<select>`则展示预定义的选项。当用户在`<input>`中输入时，组件会检查...
在开发"TEXT+SELECT"控件时，开发者需要注意几个关键点：第一，确保输入和选择的交互流畅，避免出现延迟或卡顿；第二，要对用户输入进行验证，防止无效数据的提交；第三，合理设计默认选项和提示信息，帮助用户快速...
可以使用 `$("#select_id").append("<option value='Value'>Text</option>")` 方法添加一个 Option 项。 2. 插入一个 Option 项： 可以使用 `$("#select_id").prepend("请选择</option>")` 方法插入一个 Option 项...
`bootstrap-select`是一个基于Bootstrap的下拉框增强插件，它提供了丰富的自定义选项和交互性，包括搜索功能。这个插件允许用户在下拉框中输入文字，系统会实时地进行模糊匹配，展示与输入文字相关的选项，极大地...
标题“从一个select到另一个select”暗示了我们讨论的主题与SQL查询有关，特别是涉及如何将一个SELECT查询的结果作为另一个查询的基础。在这个场景中，我们通常会使用子查询或者联接操作来实现这样的转换。让我们...
antd form 封装可搜索可输入select
`Element UI`是一个广泛使用的开源UI框架，它提供了许多预设的、美观的组件，如`Select`（下拉选择器）和`Tree`（树形结构）。在某些场景下，开发者可能需要将这两种组件结合，以满足特定的需求，例如实现一个既具备...
`jquery.editable-select`是一个jQuery插件，它提供了可编辑的下拉选择框，自带搜索功能。使用这个库可以大大简化开发过程。首先，你需要在页面中引入jQuery和`jquery.editable-select`的JS和CSS文件。然后，通过...
本文将深入探讨 Select2 的一个独特特性——拼音检索，使你的搜索功能更加智能化和便捷。 首先，我们要理解什么是拼音检索。在中文环境下，由于汉字繁多且字形复杂，直接通过输入汉字进行搜索可能会带来一定的难度...
在"bootstrapvalidator表单验证 + select2 拼音模糊匹配 demo"这个项目中，开发者旨在结合BootstrapValidator与select2插件，实现一个具有高可用性和用户体验的前端表单。 BootstrapValidator提供了多种内置验证...
如资源名，使用JAVASCRIPT动态创建一个Select元素和text元素
每个数据项通常包含一个id和text属性，其中text代表显示给用户的文本，id用于存储与之对应的值。在Select2中，每个数据项可能还包含一个children属性，用来表示有层级关系的选项。这在本实例中通过嵌套的字典来实现...
以下是一个关于如何在`<select>`和`<option>`中添加自定义图片的详细教程。 首先，我们需要理解HTML基础。`<select>`元素创建一个可选列表，用户可以选择其中的一个或多个选项。`<option>`元素定义了下拉列表中的一...
JS中Select下拉列表类支持输入模糊查询功能的知识点主要...以上知识点覆盖了实现一个具备输入模糊查询功能的Select下拉列表类的核心概念和实现步骤，这些知识点对于前端开发人员在处理类似功能时具有较高的参考价值。
子查询`(select au_id from titleauthor)`获取所有出版过书籍的作者ID，并将这些ID组成一个列表。外部查询再利用这个列表筛选出所有出版过书籍的作者信息。 #### 五、子查询与其他查询方式的对比 尽管子查询非常...