jquery ui autocomplete css

Question

I have been attempting to replicate this example of adding an image to the autocomplete list in jquery ui. The problem is that it looks gross in my version.

Example on left, mine on right

The css is very confusing, and the video tutorial I watched does not show the css. I'm assuming it's just using the default jquery-ui formatting, but when I try to use defaults, I get nothing like what I want. To get what I currently have, I took the css file from the jquery-ui site, and then modified it a bit. But now that I've added images, I don't know how to change anything.

jsfiddle

I realize that a lot of the css could be deleted because it's not being used, but I might be using it later.

Some areas of css that do things:

everything from line 123:

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

to 165:

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

does something. And near the very bottom line 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;
}

And lastly, there is the .imageClass at the VERY bottom of the css. Maybe that could be changed?? There might be other stuff to add/change, but I'm terrible at css.

Answer 1

I suspect you were missing the div wrapper.

Working example: 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;
      }
    }
  });
});

When you create the image and the link, they should be wrapped in a div . This is shown in the following example: http://jqueryui.com/autocomplete/#custom-data

If not, the class ui-menu-item-wrapper is assigned to each of the elements, causing havoc.