자동 완료 JQuery 행 구분

이미 자동 완성 단어를 채우고 있으며 자동 완성에서 더 나은 식별을 위해 단어 사이에 줄 구분 기호가 있어야합니다. 는자동 완료 JQuery 행 구분

  Brijesh 
     ------- 
     John 
     ------- 
     Mike

아래는

$(document).ready(function() { 
$("#studentName").autocomplete({ 
source: function (request, response) { 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "Webservice.asmx/GetStudentNames", 
     data: "{'prefixText':'" + request.term + "'}", 
     dataType: "json", 
     success: function (data) { 
     var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"); 
      response($.map(data.d, function (item) { 
       return { 
       label: item.split('|')[0].replace(regex, "<Strong>$1</Strong>"), 
       val: item.split('|')[1] 
       } 
      })) 
     }, 

     failure: function (response) { 
      ServiceFailed(result); 
     } 
    }); 
}, 
select: function (event, ui) { 
txtStudent(ui.item.val, ui.item.label); //Student name and id used in this method 
}, 
minLength: 2 
}); 
});

단서 주시면 감사하겠습니다 니펫 같이 드롭 다운의 값이 렌더링해야 말.

출처

2012-03-28 pal

CSS 오히려 '선택할 수없는'옵션을 추가하는 것보다, IMO 여기에 더 나은 솔루션이 될 것입니다. 그냥'border-bottom : 1px solid # 000; 여백 : 5px 0; '을 드롭 다운의 각 요소에 추가합니다. –

CSS로 구분 기호를 시뮬레이트하는 것은 어떻습니까? 같은 뭔가 :

.ui-menu-item{ 
    border-bottom: 1px dotted black; 
}

바이올린

autocomplete option { 
    padding-bottom: 4px; 
    border-bottom: 1px solid #ccc; 
    margin-bottom: 4px; 
}

출처

2012-03-28 11:06:26 unfrev

실선이 필요하고 줄이 드롭 다운 상자의 세로 테두리에 닿아 야합니다 – pal

사용 CSS는 여기 http://jsfiddle.net/JRM5Y/

출처

2012-03-28 11:14:20

실선이 필요하고 줄이 드롭 다운 상자의 세로 테두리에 닿아 야합니다. – pal

자동 완료 JQuery 행 구분

답변

관련 문제