Я не могу получить пользовательский вывод для пунктов меню автозаполнения jQueryUI для работы

0

Поэтому я пытаюсь передать значения из объекта, разбираемого из строки JSON, в объект автозаполнения jQueryUI, и я пытаюсь захватить три разных значения из 2-мерного массива, например:

[{1:a1, 2:b1,3:c1,4:d1},{1:a1, 2:b1,3:c1,4:d1}]

Это просто представление объекта, но мне нужно три значения в одном элементе результата.

Так что независимо от того, что я пробую, происходит одна из двух:

1) Когда я использую следующий код, измененный с сайта jQueryUI ,\вместе с css файлом с сайта jQueryUI, я получаю следующий результат:

.data("ui-autocomplete")._renderItem = function(ul, item) {
    return $("<li>")
    .attr("data-value", item[1])
    .append("<a>")
    .append("<span class='cardName'>" + item[1] + "</span>") 
    .append("<span class='setName'>" + item[3] + "</apan>")
    .append("<span class='rarity'>" + item[2] + "</span>")
    .append("</a>")
    .appendTo(ul);
}

Это мой собственный CSS, который я использовал также:

.cardName           { float:left; width:70%; font-weight:bold; text-align:left; }
.setName            { float:right; width:10%; text-align:right; }
.rarity             { float:right; width:15%; text-align:right; }

Вот как это выглядит:

(снимок экрана здесь) http://oi43.tinypic.com/33m1xr6.jpg

Сначала это выглядит нормально, но области выделения имеют всего несколько пикселей в высоту и совсем не совпадают с текстом.

Затем, когда я пытаюсь использовать следующее:

.data("ui-autocomplete")._renderMenu = function(ul, item) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item ); //(Also tried that._renderItem(ul,item))
  });
}

Весь текст исчезает, области выделения все еще слишком малы, но выбор наведения мыши кажется более гладким. Я пытаюсь найти способ сохранить эту гладкость, но каждый элемент меню должен быть нужного размера и показывать текст. Я пробовал поиск в Google, и я нашел кое-что о переопределении _renderItem и _renderMenu, но я действительно новичок в JavaScript, и, хотя я пытался и выглядел, я мог бы не сделать это правильно, потому что он все еще не Работа.

Я надеюсь, кто-то покажет мне, как заставить это работать правильно.

1 ответ

0

Это не работает .append. .append("<a>") самом деле сразу добавляет конечный тег (другими словами, он эквивалентен .append("<a></a>"). Вам нужно построить привязывающий тег, содержащий spans а затем добавить что к li что вы в конечном итоге возвращаетесь:

.data("ui-autocomplete")._renderItem = function(ul, item) {
    var href = $('<a />')
        .append("<span class='cardName'>" + item[1] + "</span>") 
        .append("<span class='setName'>" + item[3] + "</apan>")
        .append("<span class='rarity'>" + item[2] + "</span>");

    return $('<li />')
        .attr("data-value", item[1])
        .append(href)
        .appendTo(ul);
}

Пример: http://jsfiddle.net/WP29E/145/

  • 0
    Это все еще не решает проблему крошечных областей фона выделения, как показано серым полем под текстовым полем в этой ссылке на изображение (серое поле представляет фон выбранного первого элемента). Возможно файл CSS, который я использую, вызывает проблему? Но без этого я получаю только точки пули в правом конце экрана. ссылка
  • 0
    @ user2909165: Вы видите проблему в демоверсии? Если нет, то это может быть связано и с данными, которые вы возвращаете.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню