jQuery实时监听input输入框值变化
文章描述：
Jquery文本框输入内容实时搜索相关内容
jQuery实时监听input输入框值变化的示例：
<input type="text" id="myInput">
$('#myInput').on('input', function() {
var value = $(this).val();
console.log('输入框的值变为：' + value);
})
实时搜索示例
实时搜索是一个常见的实时监听input输入框值变化的应用场景。下面是一个基于jQuery的实时搜索示例：
<input type="text" id="searchInput" placeholder="请输入搜索关键字">
<ul id="searchResults"></ul>
$(function(){
$('#searchInput').on('input', function() {
var keyword = $(this).val().toLowerCase();
$('#searchResults').empty(); // 清空搜索结果列表
if (keyword.length > 0) {
// 模拟搜索结果
var results = ['Apple', 'Banana', 'Orange', 'Pineapple'];
results.forEach(function(result) {
if (result.toLowerCase().indexOf(keyword) !== -1) {
$('#searchResults').append('<li>' + result + '</li>');
}
});
}
})
})
css
.input-ui {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
.input-ui{ max-width:200px; font-size:14px; }
ul{ padding:0; margin:0 ;}
ul li{
font-size:14px;
color: #606266;
list-style: none;
position: relative;
display: flex;
align-items: center;
padding: 0 30px 0 20px;
height: 34px;
line-height: 34px;
outline: none;
cursor:pointer;
}
ul li:hover {
background: #f5f7fa
}
发布时间：2023/10/16
发表评论