Désactiver une option dans jQuery Autocomplete?

Question

J'utilise la commande jquery suivante pour créer un menu de saisie semi-automatique à partir des valeurs renvoyées par un script PHP.

Ce sont les valeurs renvoyées par PHP.

["Site 4","Site 2","Site 1","*************","Site 6","Site 7","Site 0"] 

et ceci est mon jquery pour la saisie semi-automatique:

$('#site').autocomplete({ 
    source: 'siteCheck.php', 
    autoFocus: true, 
    minLength: 1, 
    select: function(event, ui) { 
     $('#site').val(ui); 
    } 
}); 

Cela renvoie les résultats corrects à l'écran et affiche l'option *************. Cependant, je voudrais faire cette option BOLD et l'arrêter d'être sélectionné dans la liste.

Est-ce possible? J'ai essayé d'utiliser jquery pour désactiver l'option de sélection mais cela ne semble pas faire quoi que ce soit.

Ce n'est pas un doublon de l'autre billet, ils demandent comment désactiver les entrées après un nombre spécifique de résultats montrent .. Je veux désactiver une entrée spécifique.

Answer 1

J'ai modifié one the examples sur le site officiel de jQuery. Il devrait être assez simple pour l'adapter à vos données.

Voilà comment cela fonctionne:

1. La propriété disabled dans le tableau de données (projects) indique la logique de rendu personnalisé si oui ou non une option est désactivée.

2. Je personnalisent les générateur de définir une classe ui-state-disabled sur l'option si l'élément a disabled ensemble à true. Il permet également de définir le background-color en gris et le font-weight en gras. Puis, sur le gestionnaire d'événements focus, vous return false si l'élément est désactivé. Cela empêche jQuery de remplir l'élément dans l'entrée lorsque vous naviguez vers le bas.

3. Enfin, sur le gestionnaire select, vous empêchez à nouveau la valeur d'être sélectionnée en fonction de la valeur de la propriété disabled.

var projects = [{ 
 
    value: "jquery", 
 
    label: "jQuery", 
 
    desc: "the write less, do more, JavaScript library", 
 
    icon: "jquery_32x32.png", 
 
    disabled: false 
 
    }, 
 
    { 
 
    value: "jquery-ui", 
 
    label: "jQuery UI", 
 
    desc: "the official user interface library for jQuery", 
 
    icon: "jqueryui_32x32.png", 
 
    disabled: true 
 
    }, 
 
    { 
 
    value: "sizzlejs", 
 
    label: "Sizzle JS", 
 
    desc: "a pure-JavaScript CSS selector engine", 
 
    icon: "sizzlejs_32x32.png", 
 
    disabled: false 
 
    } 
 
]; 
 

 

 
$("#project").autocomplete({ 
 
    minLength: 0, 
 
    source: projects, 
 
    focus: function(event, ui) { 
 
     if(ui.item.disabled) { 
 
     console.log("Preventing focus."); 
 
     return false; 
 
     } else { 
 
     return true; 
 
     } 
 
    }, 
 
    select: function(event, ui) { 
 
     if(!ui.item.disabled) { 
 
     $("#project").val(ui.item.label); 
 
     } else { 
 
     console.log("Preventing selection."); 
 
     } 
 
     return false; 
 
    } 
 
    }) 
 
    .autocomplete("instance")._renderItem = function(ul, item) { 
 
    return $("<li>") 
 
     .append("<div class='"+(item.disabled ? 'ui-state-disabled' : '')+"'>" + item.label + "<br>" + item.desc + "</div>") 
 
     .appendTo(ul); 
 
    };

.ui-menu-item-wrapper.ui-state-disabled { 
 
    background-color: #aaa; 
 
    font-weight: bold; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<input id="project">