如何使用带有datalist标签的option标签附加图像src？

Question

其实我想用图片缩略图附加产品名称。我已经在datalist标签中附加了产品名称但是图片src没有追加请任何人帮助我，

以下是我的代码，

var url = 'test'

var pingStatus = false

var yourJob = {
	iteration: 0,
	/*yourJobLogic: function(url,  function(err, client){
        client.ImportData(obj, function(err, result) {
            if(result.Import[0] ==='1')
            {
                pingStatus = true
                console.log("Worked")
            }
            else
            {  
                pingStatus = false
                console.log("Didnt Work")
            }
        });
	},*/
	yourJobLogic: function(n){
		this.iteration++;
		console.log("Trying to do the job for the " + this.iteration + " time...");
		var yourConditionToPass = (n===123);
		if(this.iteration>=3){
			console.error("We tried 3 times and your job doesn't work, exit!");
			throw "Your number can(t be used....";
		}else{
			if(yourConditionToPass){
				console.info("Your job is done.");
				return true;
			}
			this.yourJobLogic(n);
		}
	},
	doJob: function(n){
        this.iteration = 0;
		this.yourJobLogic(n);
	}
};

var result = yourJob.doJob(123);
console.log(result);
//outputs: 
// Trying to do the job for the 1 time...
// Your job is done.

var result = yourJob.doJob(789);
/* outputs:
Trying to do the job for the 1 time...
Trying to do the job for the 2 time...
Trying to do the job for the 3 time...
We tried 3 times and your job doesn't work, exit!Uncaught Your number can(t be used...
*/

JS，

<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>

Answer 1

img 标记未在选项标记中运行，显示空值

使用html div 和 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>

或者您可以从这里下载 https://github.com/USAMA-app/JsFile/blob/master/Drop%20Down%20Picture.rar