Jquery 자동 완성이 드롭 다운에서 2 또는 여러 공백을 표시하지 않음을 나타냅니다.

Question

JQuery 자동 완성에서 단어 사이에 공백이 여러 개인 유사한 항목은 Jquery 플러그인 자체가 드롭 다운 항목을 자르므로 드롭 다운에 중복 항목으로 표시됩니다.

데모 : 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; 
    } 
}); 

드롭 다운 항목에서 같은 값을 표시 할 수있는 방법이 있습니까.

Answer 1

HTML 렌더링 중에 li 요소 white-space: pre-wrap에 작은 CSS를 적용해야합니다. http://jsfiddle.net/ankurgarg36/kwLmLumd/23/

이 .autocomplete("instance")._renderItem 기능은 당신의 JS 버전과 함께 작동하지 않습니다 :

여기에 근무 바이올린이 전체 조각

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); 
}; 

입니다. 그래서 최신 버전을 사용해야합니다. here