下拉自动完成

Question

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

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>');
        }
    }
}

Answer 1

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

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

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

...append(‘<div>’ + text + ‘</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"> 

Answer 2

通过在附加函数上使用<strong>标记，这是可能的。 为此，您需要将其分为单词1）的两个部分，不匹配的部分和2）。 匹配的部分。

对于匹配的部分，将字符串放入<strong>标记中，然后简单附加

参考检查这个自动完成的W3School Tryit编辑链接。

有用的代码：

b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);

其中b = jQuery('.dialog').html()