时间戳

首页 > 解决方案 > 下拉自动完成

javascript - 下拉自动完成

问题描述

我希望下拉自动完成匹配字母为粗体，这是我的下拉自动完成代码：

var states = {
  'Color': ['red', 'black', 'yellow', 'green', ],
  'Numbers': ['one', 'two', 'three', 'four']
};

function match(str) {
    str = str.toLowerCase();
    clearDialog();
    for (var i = 0; i < states.color.length; i++) {

        if (states.color[i].toLowerCase().includes(str)) {
            jQuery('.dialog').append('<div>' + states.color[i] + '</div>');
        }
    }
}

标签： javascriptjqueryhtmldrop-down-menu

解决方案

首先，您可能希望<span>在添加新创建的 div 之前执行标签插入，以便创建 CSS 类，您可以在其中设置粗体字体，甚至稍后更改其颜色或任何其他属性：

.dialog > div > .match {
    font-weight: 700;
}

然后，您可以将此新内容附加text到您的对话框中

...append(‘&lt;div>’ + text + ‘&lt;/div>’);


$(document).ready(function() {
    var states = {
        'Color': ['red', 'black', 'yellow', 'green', 'Dark Green', 'Light Grey'],
        'Numbers': ['one', 'two', 'three', 'four']
    };

    $('input').on('keyup', function () {
        match($(this).val());
    });

    function match(str) {
        str = str.toLowerCase();
        $('.dialog').empty();
        for (var i = 0; i < states.Color.length; i++) {
            if (states.Color[i].toLowerCase().includes(str)) {
                var mStart = states.Color[i].toLowerCase().indexOf(str);
                var mEnd = mStart + str.length;
                var text = states.Color[i].slice(0, mStart);
                text += '<span class="match">';
                text += states.Color[i].slice(mStart, mEnd);
                text += '</span>';
                text += states.Color[i].slice(mEnd);
                $('.dialog').append('<div>' + text + '</div>');
            }
        }
    }
});
.dialog > div > .match {
  font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />
<div class="dialog">

推荐阅读