function checkItAll() { var elements=document.querySelectorAll("#sampleform div.all");Array.prototype.forEach.call(elements,function(el,i){el.style.display='none';}); if(document.getElementById('level').value==""){$(".all").show(); $(".entry").hide(); $('.post').addClass('inactive') } if(document.getElementById('level').value==1){$(".all").hide(); $("#level1").show(); $("#entry1").show(); $('.post').removeClass('inactive')} if(document.getElementById('level').value==2){$(".all").hide(); $("#level2").show(); $("#entry2").show(); $('.post').removeClass('inactive')} if(document.getElementById('level').value==3){$(".all").hide(); $("#level3").show(); $("#entry3").show(); $('.post').removeClass('inactive')} if(document.getElementById('level').value==4){$(".all").hide(); $("#level4").show(); $("#entry4").show(); $('.post').removeClass('inactive')} if(document.getElementById('level').value==5){$(".all").hide(); $("#level5").show(); $("#entry5").show(); $('.post').removeClass('inactive')} if(document.getElementById('level').value=="фраза для автозаполнения"){$(".all").hide(); $("#level1").show(); $("#entry1").show(); $('.post').removeClass('inactive')} } function searchLevel() { document.querySelector("input").oninput = checkItAll; }

Autocomplex:

  $(document).ready(function() { var wordForSearch=["фраза для автозаполнения"]; $("#level").autocomplete({select: checkItAll,source: wordForSearch}); });

Html:

 <form action="" method="get"> <input onclick="searchLevel()" class="inputTypeText inputTypeText" type="text" value="" size=57 id="level" placeholder="быстрая навигация по уровням и лекциям, просто введите тут слово"> <input class="resetStyle" id="resets" type="reset" value="СБРОС" /><br><br> </form> <div id="noResult"><span class="red_text"></span></div> <input class="hideAndShowStyle" type="button" id="hide" value="Свернуть все" />&nbsp;&nbsp;&nbsp;<input class="hideAndShowStyle" type="button" id="show" value="Развернуть все" /> <div id="content"> <div class="all" id="level0"> <div class="post inactive"> <div class="title"> <h3>заголовок</h3> </div> <div class="entry" id="entry0" style="display:none;"> <p><a href="#" title=""><font size="3"></font></a></p> </div> </div> </div> <div class="all" id="level1"> <div class="post inactive"> <div class="title"> <h3>заголовок</h3> </div> <div class="entry" id="entry1" style="display:none;"> <p><a href="#" title=""><font size="3"></font></a></p> </div> </div> </div>

    1 answer 1

    Updated answer.

    It is necessary that your function, which is executed on the input event, also be executed during auto-completion. For this:

    1) declare it separately:

     function checkItAll() { var elements=document.querySelectorAll("#sampleform div.all") ... }

    2) specify it as an input event handler:

     function searchLevel() { document.querySelector("input").oninput = checkItAll; }

    3) specify it in the parameters for autocomplete as a select event handler:

     $("#search").autocomplete({ select: checkItAll, source: wordForSearch, minLength:2 });

    Ps in the f-s itself do not town a hundred times document.getElementById('level').value , but rather use the switch .. case :

     switch( document.getElementById('level').value) { case 1: $(".all").hide(); $("#level1").show(); $("#entry1").show(); $('.post').removeClass('inactive'); break; case 2: ...
    • Input calls a function that checks the conditions .. and if the value of the search = 1,2,3 field, etc., certain div blocks are revealed. But besides numbers, you need to search for words and output a certain block .. Everything works if you enter it into the field manually, if you select the option from the auto-click, the field does not accept the value and the condition is not met ... now I will add the code. - Alex Demonov
    • Oh, well, you have a conflict: the field change event is handled by the autocomplete plugin and your function. The plugin has its own API, and, in particular, the select event is triggered when the proposed option is selected. Probably you need to catch on there with your own checks. - Sergiks
    • How can I solve the problem? - Alex Demonov
    • changed the code, but it still doesn’t work .. somewhere I’m doing something wrong ... As for the switch, it’s clear .. - Alex Demonov