Imiter la police en gras Google avec Jquery

Question

J'ai un script qui affiche les résultats de la recherche après avoir tapé quelque chose dans le champ de saisie. Je veux imiter Google en faisant le texte gras qui est similaire à la valeur de l'entrée.

J'ai essayé ceci:

$(input).live('keyup', function(){ 
    var makeBold = $('#Results').css("font-weight","bold"); 

    if ($(input).val() == $('#Results').html()) { 
     makeBold(); 
    } 
}); 

Le problème est que maintenant tout est en gras au lieu de simplement la valeur correspondante. Comment puis-je me référer à la valeur et la relier aux résultats?

Answer 1

obtenu ce travail en utilisant le lien fourni par Mior @ Michael

var makeBold = $(input).val(); 
$('#Results').highlight(makeBold); 

La partie .highlight fait référence à la css que vous pouvez modifier en gras ou autre chose.

Answer 2

Vous voudrez emballer les pièces correspondantes des résultats dans une étiquette <span style='font-weight:bold;'>. Vous pouvez utiliser la fonction javascript replace() pour le faire assez facilement.

Answer 3

Votre problème est que vous exécutez "made bold" lorsque vous définissez makeBold. Le résultat de css() affecté à makeBold, ce n'est pas une fonction.

var makeBold = $('#Results').css("font-weight","bold"); 

Si vous voulez une fonction, attribuer makeBold un anonyme.

var makeBold = function() { $('#Results').css("font-weight","bold"); } 

Answer 4

Il y a du code que vous ne montrez pas ici. Je ne suis pas sûr de ce qui se passe avec vos résultats auto-complétés. De ce qui est affiché ici tout ce que je sais est que vous avez une boîte de saisie et un conteneur de résultats dans lequel je peux seulement supposer être rempli avec des résultats sur key-up (qui n'est pas montré dans votre fonction).

Indépendamment du Javascript, vous définissez les propriétés CSS sur l'ensemble du conteneur #Results. S'il y a d'autres résultats, ils auront aussi un fort font-weight. Ajoutez peut-être des balises span autour du résultat auto-complété et utilisez #Results span comme sélecteur.

EDIT: En supposant que vous avez une fonction automatique complète déjà l'impression des suggestions, ce que je ferais pour mettre en gras la partie dactylographiée du résultat complet automatique est en comparant leurs sous-chaînes sur keyup - puis les envelopper dans une étiquette forte.