在jQuery自動完成中禁用選項？

我正在使用以下jquery從php腳本返回的值中創建一個自動完成菜單。在jQuery自動完成中禁用選項？

這些是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禁用選擇選項，但似乎沒有做任何事情。

這不是其他票的複製品，他們要求如何在特定數量的結果顯示後禁用條目..我想禁用ONE特定條目。

來源

2017-09-24 Tom

我修改了jQuery官方網站上的one the examples。它應該很簡單，以適應您的數據。

下面是它如何工作的：

酒店disabled數據陣列（projects）告訴定製呈現邏輯的選項是否是禁用的。
如果元素的disabled設置爲true，我已經定製了渲染器以在選項上設置類ui-state-disabled。它還有助於將background-color設置爲灰色，並將font-weight設置爲粗體。
然後在focus事件處理程序中，如果該項目被禁用，則爲return false。這可以防止jQuery在向下導航時將項目填充到輸入中。
最後，在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">

來源

2017-09-24 15:48:10 Nisarg

在jQuery自動完成中禁用選項？

回答

相關問題