So implementieren Sie ein Suchfeld wie Google News

Question

Ich versuche, ein Suchfeld ähnlich wie Google News zu implementieren. Wenn Sie einen Suchbegriff eingeben, erhalten Sie im Dropdown-Menü zwei Optionen, mit denen Sie entweder in Nachrichten oder im gesamten Web suchen können.

Ich weiß, dass es viele Auswahl Plugins wie select2, aber ich weiß nicht wirklich, dass sie die richtige Lösung sind, weil sie für die Auswahl von Optionen ausgelegt sind.

Ich würde es wirklich schätzen, wenn jemand etwas Licht werfen und mich in die richtige Richtung zeigen kann, bevor ich etwas hacky setze. Vielen Dank!

Answer 1

Nun, es ist ein wenig jquery Job kein Plugin benötigt hier ist der Code.

Erstellen Sie einfach ein Textfeld und ein div mit zwei Zeilen, die in Eingabe klicken und ändern Sie dann den Text dieser Li mit der Textänderung im Textfeld und hier ist das Ergebnis: http://codepen.io/yudircks/pen/Raxabd. Hier

ist der verwendete Code unten

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
<div class="search_cont"> 
    <input type="text"> 
    <div class="result_optins"> 
    <ul> 
     <li><span></span>-Search news</li> 
     <li><span></span>-Search the web</li> 
    </ul> 
    </div> 
</div> 

CSS

*{ 
    box-sizing:border-box; 
} 
body{ 
    font-family:arial; 
} 
.search_cont input{ 
    width:300px; 
    height:30px; 
    padding:10px; 
} 
.search_cont .result_optins{ 
    width:300px; 
    display:none; 
} 
.search_cont .result_optins ul{ 
    padding:0; 
    margin:0; 
} 
.search_cont .result_optins ul li{ 
    list-style:none; 
    padding:5px; 
    border:1px solid #999; 
    color:#aaa; 
} 
.search_cont .result_optins ul li span{ 
    color:#777 
} 

JQUERY

$(document).ready(function(){ 
    $('input').on('click', function(e){ 
    e.stopPropagation(); 
    $('.result_optins').show(); 
    }); 
    $('.result_optins').on('click', function(e){ 
    e.stopPropagation(); 
    }) 
    $('input').on('input propertychange', function(e){ 
    var inputVal = $(this).val(); 
    $('.result_optins ul li').each(function(){ 
     $(this).find('span').text(inputVal); 
    }) 
    }); 
    $(document).on('click', function(){ 
    $('.result_optins').hide(); 
    }) 
})