jQueryオートコンプリートでオプションを無効にしますか？

Question

次のjqueryを使用して、PHPスクリプトによって返された値からオートコンプリートメニューを作成しています。

これらはPHPから返された値です。

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

、これはオートコンプリートのための私のjQueryのです：

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

これは、画面に正しい結果を返し、*************オプションを示しています。しかし、私はそのオプションをBOLDとし、リストから選択を中止したいと思います。

これは可能ですか？私はjqueryを使用してselectオプションを無効にしようとしましたが、それは何もしないようです。

これは他のチケットの複製ではなく、特定の数の結果が表示された後にエントリを無効にする方法を尋ねています。

Answer 1

jQueryの公式サイトでone the examplesを変更しました。それはあなたのデータのためにそれを適応させるのに十分単純でなければなりません。

はしくみはこうだ：

1. プロパティdisabledデータ配列（projects）にオプションが無効になっているか否かのカスタムレンダリングロジックを伝えます。

2. disabledがtrueに設定されている場合、レンダラーをカスタマイズしてオプションのクラスをui-state-disabledに設定しました。また、background-colorをグレーに、font-weightを太字に設定すると便利です。

3. 次に、focusイベントハンドラでは、アイテムが無効の場合はreturn falseです。これにより、jQueryがナビゲートするときに項目を入力に移入させないようにします。

4. 最後に、selectハンドラでは、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">