I want to create wordpress search by title without refleshing page. New results have to be shown when more than 3 symbols are typed in search. I’ve got input with form:
<form id="searchForm"> <input id="newsSearch" name="newsSearch" type="text" name="newsSearch" placeholder="Для отображения ленты по определенной компании введите ее название или тикер в это поле"> </form>
But when I’m typing – value of input is not changing. How can I search posts after typing 3 symbols if I cannot get input.value.length
? Also how can I search without refreshing a page? I know that it can be done with ajax but I got this code and it does nothig, page is still reloading after submit:
<script> $('#searchForm').submit(function(e) { e.preventDefault(); // prevent from submitting form directly $.ajax({ url: '<?php echo admin_url('admin-ajax.php'); ?>', method: 'post', data: $("#searchForm").serializeArray() // convert all form data to array (key:value) }) .done(function(response){ alert('ok'); // show the response $("#searchForm").reset(); // reset the form }) .fail(function(error){ alert(error); // show the error. }); }) </script>
Advertisement
Answer
Your input value isn’t changing because you are listening for ‘submit’ event on form. You should create a listener on input element on ‘input’ event.
$('#newsSearch').on('input', function(e) {...
Inside you should create yourself a check in which the function will return and do nothing if value is shorter than 3 symbols.