jquery ui 自动完成 css

Question

我一直在尝试复制这个将图像添加到 jquery ui 中的自动完成列表的示例。问题是它在我的版本中看起来很恶心。

Example on left, mine on right

css很混乱，我看的视频教程没有显示css。我假设它只是使用默认的 jquery-ui 格式，但是当我尝试使用默认值时，我什么都得不到。 为了获得我目前拥有的内容，我从 jquery-ui 站点获取了 css 文件，然后对其进行了一些修改。但是现在我已经添加了图像，我不知道如何更改任何内容。

jsfiddle

我意识到很多 css 可以被删除，因为它没有被使用，但我以后可能会使用它。

css 做事的一些领域：

第 123 行的所有内容：

.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
max-height: 27em;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}

到 165：

.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px .4em;
}

做某事。在最底线 1147 附近：

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #ffffff;
}

最后，在 css 的最底部有一个 .imageClass。也许可以改变？ 可能还有其他东西要添加/更改，但我对 css 很糟糕。

Answer 1

我怀疑您缺少 div 包装器。

工作示例：http://jsfiddle.net/Twisty/bZBLf/31/

jQuery

$(function() {
  $("#txtBookSearch").autocomplete({
      source: function(request, response) {
        var booksUrl = "https://www.googleapis.com/books/v1/volumes?printType=books&maxResults=20&q=" + encodeURIComponent(request.term);
        $.ajax({
          url: booksUrl,
          dataType: "jsonp",
          success: function(data) {
            response($.map(data.items, function(item) {
              console.log(item);
              if (item.volumeInfo.authors && item.volumeInfo.title && item.volumeInfo.industryIdentifiers && item.volumeInfo.publishedDate) {
                return {
                  // label value will be shown in the suggestions
                  ebook: (item.saleInfo.isEbook == null ? "" : item.saleInfo.isEbook),
                  title: item.volumeInfo.title,
                  id: item.id,
                  author: item.volumeInfo.authors[0],
                  authors: item.volumeInfo.authors,
                  isbn: item.volumeInfo.industryIdentifiers,
                  publishedDate: item.volumeInfo.publishedDate,
                  image: (item.volumeInfo.imageLinks == null ? "" : item.volumeInfo.imageLinks.thumbnail),
                  small_image: (item.volumeInfo.imageLinks == null ? "" : item.volumeInfo.imageLinks.smallThumbnail),
                  description: item.volumeInfo.description
                };
              }
            }));
          }
        });
      },
      select: function(event, ui) {
        $('#divDescription').empty();
        if (ui.item.image != '') {
          $('#divDescription').append('<img src="' + ui.item.image + '" style="float: left; padding: 10px;">');
        }
        if (ui.item.ebook == true) {
          $('#divDescription').append('<h2>(Ebook version)</h2>');
        }
        $('#divDescription').append('<p><b>Title:</b> ' + ui.item.title + '</p>');
        $('#divDescription').append('<p><b>Authors:</b> ' + ui.item.authors.join(', ') + '</p>');
        $('#divDescription').append('<p><b>First published year:</b> ' + ui.item.publishedDate + '</p>');
        // and the usual description of the book
        $('#divDescription').append('<p><b>Description:</b> ' + ui.item.description + '</p>');
        if (ui.item.isbn && ui.item.isbn[0].identifier) {
          $('#divDescription').append('<p><b>ISBN:</b> ' + ui.item.isbn[0].identifier + '</p>');
          $('#divDescription').append('<a href="http://www.worldcat.org/isbn/' + ui.item.isbn[0].identifier + '" target="_blank">View item on worldcat</a>');
          $('#divDescription').append('<p>Some users may own this book in a different edition, <a href="http://books.google.com/books?q=editions:ISBN' + ui.item.isbn[0].identifier + '&id=' + ui.item.id + '" target="_blank">check out other versions on google</a> and search their ISBN here</p>');
        }
      },
      minLength: 2,
      focus: function(event, ui) {
        event.preventDefault();
      },
    })
    .autocomplete('instance')._renderItem = function(ul, item) {
      var img = $('<image class="imageClass" src=' + item.small_image + ' alt= n/a' + '/>');
      var link = $('<a>' + item.title + ', ' + item.author + ', ' + item.publishedDate + (item.ebook == "" ? "" : ', (Ebook version)') + '</a>');
      return $('<li>')
        .append("<div>" + img.prop("outerHTML") + link.prop("outerHTML") + "</div>")
        .appendTo(ul);
    }
  $("#txtBookSearch").on("autocompleteselect", function(e, ui) {
    e.preventDefault();
  });
  $("txtBookSearch").keydown(function(event) {
    if (event.keyCode == 13) {
      if ($("txtBookSearch").val().length == 0) {
        event.preventDefault();
        return false;
      }
    }
  });
});

当您创建图像和链接时，它们应该包含在div 中。这显示在以下示例中：http://jqueryui.com/autocomplete/#custom-data

如果没有，则将ui-menu-item-wrapper 类分配给每个元素，从而造成严重破坏。