JS移動端彈出下拉選擇列表輸入自動完成
編輯：網頁特效代碼
效果體驗：http://hovertree.com/texiao/js/20/
或者掃描二維碼在手機體驗：
點擊選擇城市後，在彈出的層中的輸入框，輸入英文字母 h,會有HoverTree和Hewenqi兩個選項，可以點擊要輸入的項。
源碼下載：http://hovertree.com/h/bjaf/95ese8s1.htm
代碼如松下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>JS點擊彈出模態窗口下拉列表特效 - 何問起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/20/css/demo.css">
<style>
* {
padding: 0;
margin: 0;
}
.content {
margin: 50px auto 0;
width: 300px;
min-height: 500px;
}
.form-group {
width: 100%;
float: left;
margin: 5px 0;
}
label {
margin-bottom: 10px;
float: left;
}
.field-input, select {
width: calc(100% - 20px);
float: left;
padding: 10px;
font-family: inherit;
}
</style>
<!--必要樣式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/js/20/css/pickout.css">
</head>
<body>
<div class="container">
<div class="content">
<form action="#" method="post">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" class="field-input" placeholder="何問起">
</div>
<div class="form-group">
<label for="city">城市:</label>
<select name="city" id="city" class="city pickout" placeholder="選擇一個城市">
<option data-icon="♠" value="bj">北京</option>
<option data-icon="♣" value="sh">上海</option>
<option data-icon="♥" value="gz">廣州</option>
<option selected data-icon="♦" value="sz">深圳</option>
<option data-icon="☺" value="xg">香港</option>
<option data-icon="♀" value="sjz">石家莊</option>
<option data-icon="♂" value="cd">成都</option>
<option data-icon="★" value="ht">HoverTree</option>
<option data-icon="◆" value="ht">Hewenqi</option>
</select>
</div>
<div class="form-group">
<label for="name2">昵稱:</label>
<input type="text" name="name2" id="name2" class="field-input" placeholder="">
</div>
<div class="form-group">
<label for="state">職位:</label>
<select name="state" id="state" class="state pickout" placeholder="選擇一個職位">
<option value="pe">項目經理</option>
<option value="pb">工程師</option>
<option value="ba">培訓師</option>
<option value="sp">項目策劃</option>
<option value="qd">前端開發</option>
</select>
</div>
</form>
</div>
</div>
<script src="http://hovertree.com/texiao/js/20/js/pickout.js"></script>
<script>
// Preparar o select
//pickout.to('.pickout');
pickout.to({
el: '.city',
theme: 'dark',
search: true
});
pickout.to({
el: '.state',
theme: 'clean',
});
// automaticamente
pickout.updated('.city');
</script>
</body>
</html>
或者掃描二維碼在手機體驗：
點擊選擇城市後，在彈出的層中的輸入框，輸入英文字母 h,會有HoverTree和Hewenqi兩個選項，可以點擊要輸入的項。
源碼下載：http://hovertree.com/h/bjaf/95ese8s1.htm
代碼如松下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>JS點擊彈出模態窗口下拉列表特效 - 何問起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/20/css/demo.css">
<style>
* {
padding: 0;
margin: 0;
}
.content {
margin: 50px auto 0;
width: 300px;
min-height: 500px;
}
.form-group {
width: 100%;
float: left;
margin: 5px 0;
}
label {
margin-bottom: 10px;
float: left;
}
.field-input, select {
width: calc(100% - 20px);
float: left;
padding: 10px;
font-family: inherit;
}
</style>
<!--必要樣式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/js/20/css/pickout.css">
</head>
<body>
<div class="container">
<div class="content">
<form action="#" method="post">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" class="field-input" placeholder="何問起">
</div>
<div class="form-group">
<label for="city">城市:</label>
<select name="city" id="city" class="city pickout" placeholder="選擇一個城市">
<option data-icon="♠" value="bj">北京</option>
<option data-icon="♣" value="sh">上海</option>
<option data-icon="♥" value="gz">廣州</option>
<option selected data-icon="♦" value="sz">深圳</option>
<option data-icon="☺" value="xg">香港</option>
<option data-icon="♀" value="sjz">石家莊</option>
<option data-icon="♂" value="cd">成都</option>
<option data-icon="★" value="ht">HoverTree</option>
<option data-icon="◆" value="ht">Hewenqi</option>
</select>
</div>
<div class="form-group">
<label for="name2">昵稱:</label>
<input type="text" name="name2" id="name2" class="field-input" placeholder="">
</div>
<div class="form-group">
<label for="state">職位:</label>
<select name="state" id="state" class="state pickout" placeholder="選擇一個職位">
<option value="pe">項目經理</option>
<option value="pb">工程師</option>
<option value="ba">培訓師</option>
<option value="sp">項目策劃</option>
<option value="qd">前端開發</option>
</select>
</div>
</form>
</div>
</div>
<script src="http://hovertree.com/texiao/js/20/js/pickout.js"></script>
<script>
// Preparar o select
//pickout.to('.pickout');
pickout.to({
el: '.city',
theme: 'dark',
search: true
});
pickout.to({
el: '.state',
theme: 'clean',
});
// automaticamente
pickout.updated('.city');
</script>
</body>
</html>
- 上一頁:純CSS3實現可愛的豬豬
- 下一頁:綠色清新學工用戶登錄HTML模板
小編推薦
熱門推薦