jquery ui autocomplete css

Question

Ich habe versucht, dieses Beispiel des Hinzufügens eines Bildes zur Autocomplete-Liste in jquery ui zu replizieren. Das Problem ist, dass es in meiner Version ekelhaft aussieht.

Example on left, mine on right

Die CSS ist sehr verwirrend, und das Video-Tutorial Ich beobachtete, zeigt nicht die CSS. Ich gehe davon aus, dass es nur die Standard-jquery-ui-Formatierung verwendet, aber wenn ich versuche, Standardwerte zu verwenden, bekomme ich nichts, was ich will. Um zu bekommen, was ich gerade habe, nahm ich die CSS-Datei von der jquery-ui-Site und änderte sie dann ein wenig. Aber jetzt, wo ich Bilder hinzugefügt habe, weiß ich nicht, wie ich etwas ändern soll.

jsfiddle

Ich stelle fest, dass viele der CSS gelöscht werden konnte, weil es nicht verwendet wird, aber ich könnte später mit ihm werden.

Einige Bereiche von CSS, die Dinge tun:

alles von der Linie 123:

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

zu 165:

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

etwas tut. Und in der Nähe der untersten Zeile 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; 
} 

Und schließlich gibt es die .imageClass am unteren Ende des CSS. Vielleicht könnte das geändert werden ?? Es könnte andere Dinge hinzufügen/ändern, aber ich bin schrecklich bei CSS.

Answer 1

Ich vermute, Sie haben die div Wrapper vermisst.

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

Wenn Sie das Bild und den Link zu erstellen, sollten sie in einem div gewickelt werden. Dies wird im folgenden Beispiel gezeigt: http://jqueryui.com/autocomplete/#custom-data

Wenn nicht, wird jedem Element die Klasse ui-menu-item-wrapper zugewiesen, was Chaos verursacht.