Je veux que les lettres correspondantes de la liste déroulante soient en gras, voici mon code pour la saisie semi-automatique de la liste déroulante :

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>');
        }
    }
}
0
Tod 18 mars 2019 à 16:11

2 réponses

Meilleure réponse

Tout d'abord, vous pouvez effectuer une insertion de balise <span> avant d'ajouter le div nouvellement créé afin que, en créant une classe CSS, vous puissiez définir la police en gras à l'intérieur, ou même modifier sa couleur ou toute autre propriété ultérieurement :

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

Ensuite, vous pouvez ajouter ce nouveau text à votre boîte de dialogue

...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">
1
Davide Vitali 20 mars 2019 à 13:29

Cela peut être possible en utilisant la balise <strong> sur la fonction d'ajout. Pour y parvenir, vous devez le diviser en deux parties du mot 1).Partie non assortie et 2). Pièce assortie.

Pour la partie correspondante, mettez la chaîne dans la balise <strong> et ajoutez simplement

Pour référence, vérifiez ce lien W3School Tryit Editor de la saisie semi-automatique.

Code utile :

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

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

0
Asav Vora 18 mars 2019 à 14:05