Автозаполнение разделителя строк JQuery - PullRequest
Новая
       13

Автозаполнение разделителя строк JQuery

1 голос
/ 28 марта 2012

Я уже заполняю слова автозаполнения и хотел иметь разделитель строк между словами для лучшей идентификации в автозаполнении.Скажем, значение в раскрывающемся списке должно отображаться как 

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

Любые выводы будут оценены.

Ответы [ 2 ]

2 голосов
/ 28 марта 2012

Как насчет симуляции разделителя с помощью CSS. Что-то вроде: 

autocomplete option {
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 4px;
}
0 голосов
/ 28 марта 2012

Использовать CSS 

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

здесь: скрипка http://jsfiddle.net/JRM5Y/

...