input 下拉框的實踐

本文轉載自查看原文 2017-06-25 20:11 1399

有一個需求需要做一個input 框點擊出現列表

於是想到了 datalist控件

    <input type="text" list="itemlist" name="" class="search" >
             <datalist id="itemlist">
                   <option>常用001</option>
                   <option>item2</option>
                   <option>item3</option>
                   <option>item4</option>
                   <option>item5</option>
                   <option>item6</option>
             </datalist>

於是乎看了張大神的文章

http://www.zhangxinxu.com/wordpress/2013/03/html5-datalist-%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8-%E5%8F%AF%E8%A1%8C%E6%80%A7/

學習了怎么匹配到郵箱但是默認的灰色邊框去不掉還是有很大局限性

於是只能看自己的了

代碼部分：實現傳值的問題

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<title>搜索框</title>
<style>
.input-box {
position: relative;
display: inline-block;
}

.input-box .input {
background-color: transparent;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
line-height: 1.42857;
padding: 6px 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 200px;
display: inline;
position: relative;
z-index: 1;
}

.tip-l {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #555;
display: inline-block;
right: 10px;
z-index: 0;
position: absolute;
top: 12px;
}

.dropdown {
position: absolute;
top: 32px;
left: 0px;
width: 212px;
background-color: #FFF;
border: 1px solid #23a8ce;
border-top: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
z-index: 999;
padding: 0;
margin: 0;
}

.dropdown li {
display: block;
line-height: 1.42857;
padding: 0 6px;
min-height: 1.2em;
cursor: pointer;
}

.dropdown li:hover {
background-color: #23a8ce;
color: #FFF;
}
</style>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>

<div class="input-box">
<input type="text" class="input" value="Holle Word" />
<span class="tip-l"></span>
<ul class="dropdown">
<li >Holle Word</li>
<li >這是一個測試</li>
<li >簡單的dome</li>
</ul>
</div>

</body>

<script>

　var isBox = false; // 定義一個觸發焦點事件的開關，默認為不開啟狀態 || 也可以給input設置一個屬性，來判斷
$(".dropdown").hide();

$(".input").focus(function () { // input綁定焦點事件，觸發時打開焦點開關
$(this).siblings(".dropdown").show();
isBox = true;
});
$(".input-box").mousemove(function () { // 鼠標進入input-box區域內打開焦點開關
isBox = true;
});
$(".input-box").mouseout(function () { // 鼠標離開input-box區域內關閉焦點開關
isBox = false;
});

$(".input").blur(function () { // input失去焦點時通過焦點開關狀態判斷鼠標所在區域
if (isBox == true) return false;
$(this).siblings(".dropdown").hide();
});

$(".dropdown").find('li').each(function () { // 傳值給input，同時關閉焦點開關
$(this).on("click", function () {
isBox = false;
var text = $(this).text();
$(this).parent().siblings(".input").val(text);

$(".dropdown").hide();

})
})

</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 input清空和重置select下拉框 input模擬輸入下拉框 input 模糊搜索下拉框 html中的下拉框—select和input方式 v-for動態賦值給不同的下拉框input html中的下拉框—select和input方式 jquery實現可編輯的下拉框( input + select ) input輸入框和select下拉框內容清除用div，ul，input模擬select下拉框 jquery input 下拉框(模擬select控件)焦點事件

input 下拉框 的實踐

免責聲明！

input 下拉框的實踐