Поэтому я пытаюсь передать значения из объекта, разбираемого из строки 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, и, хотя я пытался и выглядел, я мог бы не сделать это правильно, потому что он все еще не Работа.
Я надеюсь, кто-то покажет мне, как заставить это работать правильно.
Это не работает .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/