dimanche 29 mars 2020

Change value of search bar after clicking a anchor

I'm currently working on a website where i'm using a custom search suggestions manager. But I don't know how I can change the value of the first input section after what I click on. Anyone have any ideas?

<form method="POST" class="search-bar header-search-bar">
            <input id="searchTerm" class="search-bar-input header-search-bar-input" type="text" placeholder="What are you looking for?" autocomplete="off">
            <input class="search-bar-btn header-search-bar-btn" type="submit" value="Search"></input>
            <div id="header-search-bar-suggestions-placeholder"></div>
            <ul id="quickipedia_output"></ul>
            <script>
                var yb = { id : function(str){return document.getElementById(str)} };

                var tag = '';

                yb.id('searchTerm').onkeyup = function(e){
                    if(!e.keyCode.toString().match(/^(37|38|39|40|13|16|17|18|224)$/)){
                        if(tag!==''){ document.body.removeChild(tag); }

                        tag = document.createElement('script');
                        var term = yb.id('searchTerm').value;

                        tag.src = 'http://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=yaComplete&search='+term;
                        document.body.appendChild(tag);

                        var div = document.getElementById('search-bar-suggestions-dynamic-placeholder')
                        if (!document.getElementById('header-search-bar-suggestions-placeholder').contains(div)){
                            yb.id('header-search-bar-suggestions-placeholder').innerHTML += '<div id="search-bar-suggestions-dynamic-placeholder" style="z-index: 9; border-top-left-radius: 4px; border-top-right-radius: 4px; background: white; width: 555px; height: 70px; box-shadow: 0 0.5px 6px 0 rgba(32,33,36,0.28); margin-left: 29.98em; margin-top: -4.4em;"></div>';
                        }
                    }
                    var input = yb.id('searchTerm');
                    setTimeout(function(){ 
                        while(input.value == ''){
                            yb.id('search-bar-suggestions-dynamic-placeholder').remove();
                        }
                    }, 150);
                };

                var yaComplete = function(data){
                    yb.id('quickipedia_output').innerHTML = '';
                    for(var i=0; i<5; i++){
                        if(data[1][i]){
                            // Add classes and id's to the p, b, and a elements to style them
                            yb.id('quickipedia_output').innerHTML += '<a href="http://en.wikipedia.org/wiki/' + data[1][i] + '" target="_blank"><li><div>' + data[1][i] + '</div></li></a>' + data[2][i];
                        }
                    }
                };
            </script>
        </form>



Aucun commentaire:

Enregistrer un commentaire