<div class="widget-searcher {{empty}}">
  <input type="text" data-id="input" placeholder="Search widget:" />
  <div class="results {{open}}" data-list="widgetList">
    <template data-name="widgetListItem"> 
      <div class="widget-list-item">
        {{widgetPath}}
      </div>
      <script data-role="test">
       {
         widgetPath:"testPathInline"
       }
      </script>
      <style>
       border-bottom:1px solid #999;
       cursor:pointer;
       &:hover{
         background:#eee;
       }
       line-height:46px;
       font-size:16px;
       box-sizing:border-box;
       padding:0 10px;
        background:white
      </style>
    </template>
  </div>
</div>
<style>
 box-sizing:border-box;
 position:relative;
 color:#666;
 font-family:verdana;

 input{
   width:100%;
   padding:6px 12px;
   font-size:24px;
   display:block;
   box-sizing:border-box;
   border:none;
   border-bottom:1px solid #999;
   outline-width:0;
 }
 .results{
   width:100%;
   position:absolute;
   z-index:1;
   top:100%;
   left:0;
   background-color:white;
   transform:translateY(1px);
   display:none;
   &.open{
     display:block;
   }
 }
</style>
<script data-role="test">
 {
   empty:false,
   open:true,
   widgetList:[{
     widgetPath:"/path1"
   },{
       widgetPath:"/path2"
     },{
       widgetPath:"/pathQAQ"
     }]
 }
</script>
