Advertisement
Guest User

HTML and javascript

a guest
Jan 30th, 2016
148
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <li>
  2.     <div class="ui-widget">
  3.         <input id="search" placeholder="search...">
  4.     </div>
  5. </li>
  6.  
  7.  
  8. <script>
  9. $(function() {
  10.  
  11.   $( "#search" ).autocomplete({
  12.     source: function( request, response ) {
  13.       $.ajax({
  14.         url: "/get_search_results",
  15.         dataType: "json",
  16.         data: {
  17.           search_query: request.term
  18.         },
  19.         success: function( data ) {
  20.           /*response( data );*/
  21.           response( $.map( data.search_results, function( item ) {
  22.             return {
  23.               label: item.title,
  24.               value: item.link,
  25.               logo: item.logo
  26.             }
  27.           }));
  28.         },
  29.  
  30.       });
  31.     },
  32.     minLength: 3,
  33.     select: function( event, ui ) {
  34.       window.location.href = ui.item.value;
  35.     }
  36.   });
  37.  
  38.   /*
  39.    *  Add team logo to search results
  40.    */
  41.   $( "#search" ).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  42.    
  43.     var $li = $('<li>'),
  44.         $img = $('<img>');
  45.  
  46.     $img.attr({
  47.       class: "search-club-logo-small",
  48.       src: item.logo,
  49.       alt: item.label,
  50.       onerror: "this.onerror=null;this.src='/static/logos/clubs/no_team_logo_32.png';"
  51.     });
  52.  
  53.     $li.attr('data-value', item.label);
  54.     $li.append('<a href="#">');
  55.     $li.find('a').append($img).append(item.label);    
  56.  
  57.     return $li.appendTo(ul);
  58.   };
  59.  
  60. });
  61.  
  62. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement