自動完成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; margin：5px 0;'給下拉列表中的每個元素。 – 2012-03-28 11:04:24

如何用CSS模擬分隔符。喜歡的東西：

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

來源

2012-03-28 11:06:26 unfrev

我需要一條實線，並且該線應觸及下拉框的垂直邊框 – pal 2012-03-29 07:52:07

使用CSS

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

小提琴這裏http://jsfiddle.net/JRM5Y/

來源

2012-03-28 11:14:20

我需要一條實線，並且該線應該觸摸下拉框的垂直邊框 – pal 2012-03-29 07:51:50

自動完成JQuery行分隔符

回答

相關問題