使用jQuery框架应用css类在输入框/ul列表中的keyup上找到匹配项_Jquery_Javascript

使用jQuery框架应用css类在输入框/ul列表中的keyup上找到匹配项

jquery javascript

使用jQuery框架应用css类在输入框/ul列表中的keyup上找到匹配项,jquery,javascript,Jquery,Javascript,我需要你的帮助我不知道这项技术叫什么，但你知道，在一些网站上，你开始在输入框中输入一些值，最近的结果会立即突出显示我假设它在某个关键事件中捕获了这些信息。我想把同样的概念应用到我的例子中例如，如果我在输入框中键入值'698'，jQuery将查找、选择并将我的css类标题为：.selected应用于该值（就像我要单击并选择它一样。我认为该插件对于用户和眼睛来说都是整洁和有目的的我想进一步说，一旦应用了css类，函数也应该将滚动位置移动到检测到的值下面是所需结果的快速图片：非常感谢和感

我需要你的帮助

我不知道这项技术叫什么，但你知道，在一些网站上，你开始在输入框中输入一些值，最近的结果会立即突出显示

我假设它在某个关键事件中捕获了这些信息。我想把同样的概念应用到我的例子中

例如，如果我在输入框中键入值

'698'

，jQuery将查找、选择并将我的css类标题为：

.selected

应用于该值（就像我要单击并选择它一样。我认为该插件对于用户和眼睛来说都是整洁和有目的的

我想进一步说，一旦应用了css类，函数也应该将滚动位置移动到检测到的值

下面是所需结果的快速图片：

非常感谢和感谢大家的帮助和支持

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<style type="text/css">
* {
    font-family: Segoe UI;
    font-size: 9pt;
}
#refdocs {
    border: 0;
    width: 100%;
    height: auto;
    padding-left: 2px;
}
#refdocs_main {
    border: 1px solid rgb(170,170,170);
    width: 179px;
    overflow: hidden;
    margin-top: 1px;
}
#refdocs_input{
    border-bottom: 1px solid rgb(170,170,170);
    height: 20px;

}
#refdocs_wrapper{
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}
#refdocs_list {
    width: 100%;
}
#refdocs_list ul {
    margin: 0;
    padding: 0px;
    list-style-type: none;
}
#refdocs_list li {
    cursor: default;
    padding: 2px;
}
.selected {
    background: rgb(228,228,228);
}

</style>

<script type="text/javascript">
window.onload = function() {

    $('#refdocs_list ul li').click(function () {
        $('#refdocs_list ul li').removeClass('selected');
        $(this).addClass('selected');
        document.getElementById('refdocs').value = $(this).text()
    });




}
</script>

</head>

<body>

    <div id="refdocs_main">

        <div id="refdocs_input"><input type="text" id="refdocs"></div>

        <div id="refdocs_wrapper">

            <div id="refdocs_list">
                <ul>
                    <li>9094203</li>
                    <li>9279863</li>
                    <li>9023698</li>
                    <li>8993127</li>
                    <li>9037891</li>
                </ul>
            </div>

        </div>

    </div>

</body>

</html>


* {
字体系列：SegoeUI；
字号：9pt；
}
#参考文献{
边界：0；
宽度：100%；
高度：自动；
左侧填充：2px；
}
#梅因酒店{
边框：1px实心rgb（170170）；
宽度：179px；
溢出：隐藏；
页边顶部：1px；
}
#REF\u输入{
边框底部：1px实心rgb（170170）；
高度：20px；
}
#refdocs\u包装器{
高度：100px；
溢出y：滚动；
溢出x：隐藏；
}
#参考文档列表{
宽度：100%；
}
#参考文献列表{
保证金：0；
填充：0px；
列表样式类型：无；
}
#参考文献列表{
游标：默认值；
填充：2px；
}
.选定{
背景：rgb（228）；
}
window.onload=函数（）{
$（'#refdocs_list ul li'）。单击（函数（）{
$（'#refdocs_list ul li'）。removeClass（'selected'）；
$（this.addClass（'selected'）；
document.getElementById（'refdocs'）。值=$（this.text（））
});
}

9094203
9279863
9023698
8993127
9037891

可能是这样的

$("#refdocs").keyup(function(event) {
                if (event.which == 13) {
                    event.preventDefault();
                }
                var va = $( this ).val();
                $("li:contains(" + va + ")").first().css("text-decoration","underline");

            });

看看它是如何做到这一点的。