2017-01-10 2 views
1

Eigentlich möchte ich Produktnamen mit Bildminiaturbild anhängen. Ich habe anhängt Produktnamen in Datalist-Tag getan, aber Bild src ist anhängt nicht bitte jemand mir helfen,Wie Bild src mit Option-Tag mit Dataist-Tag anhängen?

Unten ist mein Code,

<div id="search" class="input-group"> 
    <input type="text" id="search_suggest" name="search" list="products" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" class="form-control input-lg" /> 
    <datalist id="products"> 
    </datalist> 
    <span class="input-group-btn"> 
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button> 
    </span> 
</div> 

Js,

$(document).on('keyup','#search_suggest',function(){ 
    var product_name = $(this).val(); 
    var x = 'image/no_image.png'; 
    $.ajax({ 
      url: 'index.php?route=product/search/search_suggestion', 
      type: 'post', 
      data: {'search': product_name}, 
      dataType: 'json', 
      success: function(response) { 
      // console.log(response); 
      var data = $.parseJSON(JSON.stringify(response)); 
      // console.log(data); 
      $('#products').empty(); 
      $.each(data, function(i, res){ 
       $('#products').append('<option value="'+res['name']+'"><img src="'+x+'"/></option>'); 
       // $('#products').append('<option><img src="'+x+'"/></option>'); 
       });          
      },  
      error: function(xhr, ajaxOptions, thrownError) { 
       alert('error');    ; 
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);      
      } 
     }); 
    }); 
+0

müssen Sie möglicherweise trim() die Antwortdaten - die Re scheint immer ein Leerzeichen Problem bei der Rückkehr Ajax. versuch: var data = $ .parseJSON (JSON.stringify (response.trim())); – gavgrif

+0

Nein, es funktioniert nicht. – Mohan

Antwort

2

img Tag nicht run in option tag es zeigt Nullwert

erstellen Ihr eigenes Dropdown html div und jQuery

/************** Skin 1 *********************/ 
 

 
.dd { 
 
    /*display:inline-block !important;*/ 
 
    text-align: left; 
 
    background-color: #fff; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    float: left; 
 
} 
 
.dd .ddTitle { 
 
    background: #f2f2f2; 
 
    border: 1px solid #c3c3c3; 
 
    padding: 3px; 
 
    text-indent: 0; 
 
    cursor: default; 
 
    overflow: hidden; 
 
    height: 16px; 
 
} 
 
.dd .ddTitle span.arrow { 
 
    background: url(dd_arrow.gif) no-repeat 0 0; 
 
    float: right; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    cursor: pointer; 
 
} 
 
.dd .ddTitle span.ddTitleText { 
 
    text-indent: 1px; 
 
    overflow: hidden; 
 
    line-height: 16px; 
 
} 
 
.dd .ddTitle span.ddTitleText img { 
 
    text-align: left; 
 
    padding: 0 2px 0 0 
 
} 
 
.dd .ddTitle img.selected { 
 
    padding: 0 3px 0 0; 
 
    vertical-align: top; 
 
} 
 
.dd .ddChild { 
 
    position: absolute; 
 
    border: 1px solid #c3c3c3; 
 
    border-top: none; 
 
    display: none; 
 
    margin: 0; 
 
    width: auto; 
 
    overflow: auto; 
 
    overflow-x: hidden !important; 
 
    background-color: #ffffff; 
 
} 
 
.dd .ddChild .opta a, 
 
.dd .ddChild .opta a:visited { 
 
    padding-left: 10px 
 
} 
 
.dd .ddChild a { 
 
    display: block; 
 
    padding: 2px 0 2px 3px; 
 
    text-decoration: none; 
 
    color: #000; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    cursor: pointer; 
 
} 
 
.dd .ddChild a:hover { 
 
    background-color: #66CCFF; 
 
} 
 
.dd .ddChild a img { 
 
    border: 0; 
 
    padding: 0 2px 0 0; 
 
    vertical-align: middle; 
 
} 
 
.dd .ddChild a.selected { 
 
    background-color: #66CCFF; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.dd .borderTop { 
 
    border-top: 1px solid #c3c3c3 !important; 
 
} 
 
.dd .noBorderTop { 
 
    border-top: none 0 !important 
 
} 
 
/************** Skin 2 *********************/ 
 

 
.dd2 { 
 
    /*display:inline-block !important;*/ 
 
    text-align: left; 
 
    background-color: #fff; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    float: left; 
 
} 
 
.dd2 .ddTitle { 
 
    background: transparent url(../images/msDropDown.gif) no-repeat; 
 
    padding: 0 3px; 
 
    text-indent: 0; 
 
    cursor: default; 
 
    overflow: hidden; 
 
    height: 36px; 
 
} 
 
.dd2 .ddTitle span.arrow { 
 
    background: transparent url(../images/icon-arrow.gif) no-repeat 0 0; 
 
    float: right; 
 
    display: inline-block; 
 
    width: 27px; 
 
    height: 27px; 
 
    cursor: pointer; 
 
    top: 5px; 
 
    position: relative; 
 
    right: 2px; 
 
} 
 
.dd2 .ddTitle span.ddTitleText { 
 
    text-indent: 1px; 
 
    overflow: hidden; 
 
    line-height: 33px; 
 
    font-family: Georgia, "Times New Roman", Times, serif; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    _position: relative; 
 
    _top: 4px 
 
} 
 
.dd2 .ddTitle span.ddTitleText img { 
 
    text-align: left; 
 
    padding: 0 2px 0 0; 
 
} 
 
.dd2 .ddTitle img.selected { 
 
    padding: 0 2px 0 0; 
 
    vertical-align: top; 
 
} 
 
.dd2 .ddChild { 
 
    position: absolute; 
 
    border: 1px solid #c3c3c3; 
 
    border-top: none; 
 
    display: none; 
 
    margin: 0; 
 
    width: auto; 
 
    overflow: auto; 
 
    overflow-x: hidden !important; 
 
    background-color: #ffffff; 
 
    font-size: 14px; 
 
} 
 
.dd2 .ddChild .opta a, 
 
.dd2 .ddChild .opta a:visited { 
 
    padding-left: 10px 
 
} 
 
.dd2 .ddChild a { 
 
    display: block; 
 
    padding: 3px 0 3px 3px; 
 
    text-decoration: none; 
 
    color: #000; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    cursor: pointer; 
 
} 
 
.dd2 .ddChild a:hover { 
 
    background-color: #66CCFF; 
 
} 
 
.dd2 .ddChild a img { 
 
    border: 0; 
 
    padding: 0 2px 0 0; 
 
    vertical-align: middle; 
 
} 
 
.dd2 .ddChild a.selected { 
 
    background-color: #66CCFF; 
 
} 
 
.dd2 .borderTop { 
 
    border-top: 1px solid #c3c3c3 !important; 
 
} 
 
.dd2 .noBorderTop { 
 
    border-top: none 0 !important 
 
} 
 
/************* use sprite *****************/ 
 

 
.dd .ddChild a.sprite, 
 
.dd .ddChild a.sprite:visited { 
 
    background-image: url(../icons/sprite.gif); 
 
    background-repeat: no-repeat; 
 
    padding-left: 24px; 
 
} 
 
.dd .ddChild a.calendar, 
 
.dd .ddChild a.calendar:visited { 
 
    background-position: 0 -404px; 
 
} 
 
.dd .ddChild a.shoppingcart, 
 
.dd .ddChild a.shoppingcart:visited { 
 
    background-position: 0 -330px; 
 
} 
 
.dd .ddChild a.cd, 
 
.dd .ddChild a.cd:visited { 
 
    background-position: 0 -439px; 
 
} 
 
.dd .ddChild a.email, 
 
.dd .ddChild a.email:visited { 
 
    background-position: 0 -256px; 
 
} 
 
.dd .ddChild a.faq, 
 
.dd .ddChild a.faq:visited { 
 
    background-position: 0 -183px; 
 
} 
 
.dd .ddChild a.games, 
 
.dd .ddChild a.games:visited { 
 
    background-position: 0 -365px; 
 
} 
 
.dd .ddChild a.music, 
 
.dd .ddChild a.music:visited { 
 
    background-position: 0 -146px; 
 
} 
 
.dd .ddChild a.phone, 
 
.dd .ddChild a.phone:visited { 
 
    background-position: 0 -109px; 
 
} 
 
.dd .ddChild a.graph, 
 
.dd .ddChild a.graph:visited { 
 
    background-position: 0 -73px; 
 
} 
 
.dd .ddChild a.secured, 
 
.dd .ddChild a.secured:visited { 
 
    background-position: 0 -37px; 
 
} 
 
.dd .ddChild a.video, 
 
.dd .ddChild a.video:visited { 
 
    background-position: 0 0; 
 
} 
 
/*******************************/
<html> 
 

 
<head> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
    <script src="https://github.com/USAMA-app/JsFile/blob/master/jquery.dd.js"></script> 
 
    <script> 
 
    $(document).ready(function(e) { 
 
     try { 
 
     $("body select").msDropDown(); 
 
     } catch (e) { 
 
     alert(e.message); 
 
     } 
 
    }); 
 

 

 
    function showValue(a) { 
 
     console.log(a); 
 
    } 
 
    </script> 
 

 
</head> 
 

 
<body> 
 

 
    <select name="webmenu" id="webmenu" onchange="showValue(this.value)"> 
 
    <option value="calendar" title="icons/icon_calendar.gif">Calendar</option> 
 
    <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option> 
 
    <option value="cd" title="icons/icon_cd.gif">CD</option> 
 
    <option value="email" selected="selected" title="icons/icon_calendar.gif">Email</option> 
 
    <option value="faq" title="icons/icon_faq.gif">FAQ</option> 
 
    <option value="games" title="icons/icon_games.gif">Games</option> 
 
    </select> 
 
</body> 
 
<html>



oder Sie können herunterladen von hier
https://github.com/USAMA-app/JsFile/blob/master/Drop%20Down%20Picture.rar

mit