0

I have an input field that is connected to the jQuery autocomplete function. I was trying to get a select field to also trigger the autocomplete to refine the search results.

I have things working the way I would like them to but it isn't clear to me WHY the select input field is triggering the AutoComplete function. The county field would normally be hidden until some search results were found but I've left it exposed to simplify things a little.

I understand why the ModSearch input field triggers the AutoComplete function but not why the county field does too (it is only referenced in the AutoComplete function itself). It is worth noting that the county field does NOT trigger the AutoComplete until at least 1 character has been entered into the ModSearch field.

The code below is self contained and if it saved as PHP and called from a browser it will simply echo the contents of $_GET after something is entered into the search field.

JSFiddle of the HTML and JS

<?php
if (!empty($_GET['look4'])) {
    echo '<pre>';
    print_r($_GET);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
function AutoComplete() {
    $("#ModSearch,#county").autocomplete({
        source: function(request, response) {
            var look4   = $("#ModSearch").val();
            var county  = $("#county").val();
            var request = $.ajax({
                    url: 'SO_Question.php',
                    data: { look4   : look4    ,
                            county  : county}  ,
                    dataType: "text",
                    cache: false
                    })
            request.done(function( response ) {
                document.getElementById('results').innerHTML     = response;
                document.getElementById("results").style.display = "block"    
            });
        },  // end of source
    });  // end of autocomplete
}  // end of the AutoComplete function
$(function() {
    $('#ModSearch').on('input',function() {
        AutoComplete();
    });
});  // end of function
</script>
</head>
<body>
<p>
Start typing to search: <input type="search" id="ModSearch" placeholder="Start typing to search">
<section>
You may refine your search by choosing a county
<select name="county" id="county" size="1">
<option value="">-- Select County --</option>
<option value="91">ABC</option>
<option value="92">DEF</option>
<option value="93">XYZ</option>
</select>
</section>
<div id="results" style="display: none;"></div>
</body>
</html>

Edit to add:

The modification to the JS that is shown below seems to be working and is understandable (at least to me). If there is further refinement possible I am all ears so to speak.

$(function() {

    $("#ModSearch,#county").autocomplete({
        source: function(request, response) {

            var look4   = $("#ModSearch").val();
            var county  = $("#county").val();

            var request = $.ajax({
                    url: 'SO_Question.php',
                    data: { look4   : look4    ,
                            county  : county}  ,
                    dataType: "text",
                    cache: false
                    })

            request.done(function( response ) {

                document.getElementById('results').innerHTML     = response;
                document.getElementById("results").style.display = "block";

            });

        },  // end of source

    });  // end of autocomplete

});  // end of function
Dave
  • 5,108
  • 16
  • 30
  • 40
  • `$("#ModSearch,#county").autocomplete({` <= what do you mean it is only referenced in the method? – Taplar May 30 '19 at 21:07
  • Actually your input event handler is calling AutoComplete which is reinitializing the autocomplete every time. That's very heavy and not necessary. You should only have to initialize once. – Taplar May 30 '19 at 21:08
  • To your first comment, it is referenced there but until the AutoComplete function is called the `county` element doesn't trigger the autocomplete function. To your second comment, how would/should I initialize it once? – Dave May 30 '19 at 21:12
  • http://api.jqueryui.com/autocomplete/#method-option If you initialize it once, you can use the option method to update the source option as you desire. You can also give the source a function for a value, which iirc, will run any time the value changes, which could potentially perform the ajax call there. Would have to verify that, though I'm 99% we do it like that in one of my applications. – Taplar May 30 '19 at 21:14
  • Thanks for the pointer and description @Taplar. I understand, I think, what you are saying but not at all sure how to implement it. – Dave May 30 '19 at 21:18
  • Related: https://stackoverflow.com/questions/21385892/how-to-use-source-function-and-ajax-in-jquery-ui-autocomplete – Taplar May 30 '19 at 21:21

0 Answers0