<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}
</style>
<script type="text/javascript">
var optionDiv = document.createElement("div");
function createselectelements(obj,arr){
var oWhere = document.body;
//设置下拉菜单选项的坐标和宽度
with(optionDiv.style) {
var xy = getSelectPosition(obj);
pixelLeft = xy[0];
pixelTop = xy[1]+obj.offsetHeight;
width = obj.offsetWidth;
optionDiv.className = "optionDiv";
}
//下拉菜单内容
var val1=obj.value;
var optionsindexs=0;
for(var i=optionDiv.childNodes.length;i>0;i--){
optionDiv.removeChild(optionDiv.childNodes[i-1]);
}
var Options = new Array();
for (var i=0;i<arr.length;i++) {
if(arr[i].indexOf(val1)==0){
Options[optionsindexs] = optionDiv.appendChild(document.createElement("div"));
Options[optionsindexs].innerText= arr[i];
optionsindexs++;
}
}
//移动Option时的动态效果
for (i=0;i<Options.length;i++) {
if (document.all)
{
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",function(){selectedText(obj)});
}else
{
Options[i].addEventListener("mouseup",function(){selectedText(obj)},false);
Options[i].addEventListener("mouseout",function(){moveWithOptions("","")},false);
Options[i].addEventListener("mouseover",function(){moveWithOptions("highlight","white")},false);
}
}
oWhere.appendChild(optionDiv);
}
optionDiv.onselectstart = function() {return false;}
function showOptions(obj,selected){
var arr =new Array();
for(var i=0;i<selected.options.length;i++){
alert(selected.options[i].name);
arr[i]=selected.options[i].value;
}
createselectelements(obj,arr);
if(optionDiv.childNodes.length==0){
optionDiv.style.visibility = "hidden";
}else{
optionDiv.style.visibility = "visible";
}
}
document.onclick = function() {
optionDiv.style.visibility = "hidden";
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
function selectedText(obj) {
with(event.srcElement) {
obj.value = innerText;
}
optionDiv.style.visibility = "hidden";
}
/*通用函数*/
//获取对象坐标
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
</script>
</head>
<body>
<select name="selectmenu" id="selectmenu" style="visibility:hidden" onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].name" >
<option value="">选择邮箱</option>
<option value="sina.com">www.sina.com</option>
<option value="sohu.com">www.sohu.com</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 name="dmtxt" id ="dmtxt" type="text" value="" oninput="showOptions(this,document.getElementById('selectmenu'));" onMouseOver="this.select();this.focus();" style="">
<select name="selectmenu" id="selectmenu" style="visibility:hidden" onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].name" >
<option value="">选择邮箱</option>
<option value="sina.com">sina.com</option>
<option value="sohu.com">sohu.com</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 name="dmtxt" id ="dmtxt" type="text" value="" oninput="showOptions(this,document.getElementById('selectmenu'));" onMouseOver="this.select();this.focus();" style="">
<script>
</script>
</body>
</html>
分享到：
相关推荐
标题中的“可手动输入的select”指的是在网页或者应用程序中，用户可以手动输入文本的下拉选择框。这种交互方式通常结合了下拉菜单的效率和自由输入的灵活性，允许用户在预设选项中选择，或者自定义输入不包含在列表...
"可选择可输入的select"就是一种改进的下拉菜单实现，它允许用户在下拉选项中选择，同时也能自由输入新的值。这种功能在许多场合非常实用，例如当用户可能需要输入未在预定义选项中的数据时。 这个博客文章...
在网页开发中，"可文本输入的下拉框select"是一种常见的交互元素，它结合了传统的HTML `<select>` 下拉菜单和自由文本输入的功能。这种设计可以为用户提供更灵活的选择方式，既可以快速从预设选项中选取，也可以手动...
为了进一步提升用户体验，你还可以添加一些附加功能，如自动聚焦搜索框、输入提示、错误处理等。这可以通过扩展 `jQuery` 代码来实现。 通过以上步骤，你就成功地创建了一个使用 `jQuery` 和 CSS 的带模糊搜索功能...
本知识点主要探讨的是“现实ComboBox”，即一个具有自动提示功能的可编辑Select选择框。 这个特定的ComboBox实现可能包括以下关键特性： 1. **可编辑性**：用户不仅可以从下拉列表中选择一个选项，还可以直接在...
"可输入的HTML下拉列表框，自带筛选"是一种优化用户体验的常见功能，它允许用户在下拉菜单中通过输入关键字来快速定位并选择所需项，极大地提高了操作效率。这种技术主要涉及到HTML、CSS以及JavaScript等前端技术，...
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
4. **事件监听**：如果需要监听搜索框的输入事件，可以使用`Chosen`提供的API。例如，监听搜索框的`change`事件来处理用户的搜索操作： ```javascript $("#yourSelectId").on("change", function() { var ...
在前端开发中，"select框模糊查询方法"是一种常见的用户交互功能，允许用户在下拉选择框中输入关键字，快速找到并选择匹配项。这样的功能极大地提升了用户体验，尤其是在选项众多时，用户不再需要逐个滚动查找，而是...
通过这样的配置和交互，我们可以实现一个高效且美观的jQuery搜索框输入文字下拉提示菜单，极大地提高了用户的输入效率，同时保持了Bootstrap的界面风格。这个项目不仅适用于简单的静态数据，也可以轻松地扩展到大型...
在本主题中，我们将深入探讨如何使用C#在Visual Studio 2005（VS2005）中实现提示选择框的功能。提示选择框通常被称为对话框或者下拉列表，它提供用户在多个预设选项中进行选择，增强用户交互性。 首先，我们需要...
当用户输入字符后，如果下拉列表中有匹配的选项，则显示在提示框中。用户可以通过上下箭头键来在匹配的选项间选择。 8. 跨浏览器兼容性：虽然示例代码中没有明确提到，但在实际开发中需要确保代码在不同的浏览器中...
标题中的“可编辑并自动提示的select控件”指的是在Web开发中，使用特定的JavaScript库或组件，创建一种能够动态提示选项，并且允许用户编辑输入的下拉选择框（Select）控件。这种控件通常用于提高用户体验，让用户...
在JavaScript编程中，实现下拉提示选择框的功能通常涉及到对HTML Select元素的增强，以便提供更丰富的用户体验。本文介绍了一种结合使用`select`和`suggest`（实际上是指Select2库）的方法，来创建一个既支持直接从...
本项目通过HTML、JavaScript（可能包括jQuery或其他JS库）实现了一个具有模糊搜索功能的下拉选择框。 首先，我们来看HTML部分。在HTML中，传统的`<select>`元素用于创建下拉列表。然而，为了实现模糊搜索，我们需要...
标题“可控制选择框”可能指的是在编程或前端开发中，如何实现对HTML选择框（Select元素）的自定义控制和交互。在这个场景下，开发者可能需要创建具有特定功能的选择框，比如动态加载选项、多选限制、搜索过滤、分组...
全国城市、城镇联动下拉选择框是Web开发中常见的交互元素，主要用于用户在网页上进行地理范围的选择。这种选择框通常包含国家、省份、城市、区县甚至城镇的层级结构，用户可以逐级选择，方便地定位到所需的具体地区...
6. **自定义配置**：Bootstrap-selectpicker允许通过JavaScript进行配置，如改变提示文本、设置最大选择项数等。你可以通过`$('select').selectpicker('setOptions', {option: value});`来设定。 通过分析和学习这...
Choices.js 是一个强大的JavaScript库，专门用于创建可高度定制的选择框和文本输入插件。它为开发者提供了丰富的自定义选项，使得在Web应用中构建功能丰富、交互性强的表单元素变得轻而易举。这个插件尤其适用于那些...