jQuery 자동 완성에서 옵션을 비활성화 하시겠습니까?

다음 jquery를 사용하여 PHP 스크립트에서 반환 한 값에서 자동 완성 메뉴를 만듭니다.jQuery 자동 완성에서 옵션을 비활성화 하시겠습니까?

다음은 PHP에서 반환 한 값입니다.

이

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

이 화면에 올바른 결과를 반환하고 ************* 옵션을 보여줍니다

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

는 이것은 자동 완성 내 JQuery와있다. 그러나 그 옵션을 BOLD으로 만들고 목록에서 선택하는 것을 중지하고 싶습니다.

그럴 수 있습니까? 선택 옵션을 사용하지 않으려면 jquery를 사용하려고했지만 아무 것도하지 않는 것 같습니다.

다른 티켓과 중복되지 않으므로 특정 수의 결과가 표시되면 항목을 비활성화하는 방법을 묻습니다. 특정 항목을 하나만 비활성화하려고합니다.

출처

2017-09-24 Tom

jQuery의 공식 사이트에서 one the examples을 (를) 수정했습니다. 그것은 당신의 데이터에 맞게 충분히 간단해야합니다. 그것이 어떻게 작동하는지

은 다음과 같습니다 데이터 배열 (projects)에서

속성 disabled이 옵션을 사용할 수 있는지 여부를 지정 렌더링 논리를 알려줍니다.
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 자동 완성에서 옵션을 비활성화 하시겠습니까?

답변

관련 문제