Jquery autocomplete ne pas afficher 2 ou plusieurs espaces dans le menu déroulant suggéré

Question

Dans la saisie semi-automatique JQuery, les éléments similaires présentant des différences d'espaces entre les mots sont affichés en tant qu'éléments dupliqués dans le menu déroulant Jquery lui-même tronquant les éléments déroulants.

Démo: Working demo of issue

var validOptions =["Item 1", "Item  1", "Item  1", "Item 2", "Item 2"]; 
previousValue = ""; 

$('#ac').autocomplete({ 
    autoFocus: true, 
    source: validOptions, 
}).keyup(function() { 
    var isValid = false; 
    for (i in validOptions) { 
     if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { 
      isValid = true; 
     } 
    } 
    if (!isValid) { 
     this.value = previousValue 
    } else { 
     previousValue = this.value; 
    } 
}); 

Est-il possible de montrer la valeur en tant que telle dans les éléments déroulants.

Answer 1

Vous devez appliquer le minuscule CSS pour l'élément li white-space: pre-wrap pendant le rendu HTML.

Voici l'extrait complet

var validOptions = ["Item 1", "Item  1", "Item  1", "Item 2", "Item 2"]; 
previousValue = ""; 

$('#ac').autocomplete({ 
autoFocus: true, 
source: validOptions 
}) 
.keyup(function() { 
var isValid = false; 
for (i in validOptions) { 
    if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { 
    isValid = true; 
    } 
} 
if (!isValid) { 
    this.value = previousValue 
} else { 
    previousValue = this.value; 
} 
}).autocomplete("instance")._renderItem = function(ul, item) { 
    return $("<li style='white-space: pre-wrap'>") 
    .append(item.label) 
    .appendTo(ul); 
}; 

violon travail: http://jsfiddle.net/ankurgarg36/kwLmLumd/23/

Cette fonction .autocomplete("instance")._renderItem ne fonctionne pas avec la version js. Donc, je dois utiliser la dernière version proposée here