Simplifying Autocomplete Custom City Country State Taxonomy

enter image description here

I have a theme search bar but I would like to simplify it. It shows Countries, after selection it then script shows the child States dropdown below and then same thing for Cities. It has a built in autocomplete list for each. However I simply just want to skip straight to the City to allow auto complete on that(whilst displaying correct state and country for each result eg. typing in “n” could display what’s on the left, but I would like it to display what’s on the right.

Obviously the removal of a lot of coding is necessary but I am eager to understand how it works. If someone could look at this and show and explain to me how it is you change it properly, it would be appreciated.

I also understand that it calls another PHP file “cities.php” however I was think that I wouldn’t need to touch that code and can still just call the Country and state through this script alone (Although I could be wrong…).

Playing with it, I can only get it to replace its own dropdown menu with the next child dropdown(Country > State > City).

The Javascript:

<?php if(get_option("quicklsearch") == "1") { ?>
<div class="quicksearch">
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // get cities from the selected country in dropdown
        var c = ".search-cities-input";
        var parent_div = ".quicksearch";
        var country = $(c).val();
        <?php if(showfield('city')) { ?>
            var city_div = '.search-states-input';

            var city_c = '#city';
            var city_div = '.search-cities-input';
        <?php } else { ?>
            var city_div = '.search-cities-input';
        <?php } ?>

        if(country > 0) { show_search_cities(c); }
        $(parent_div+' '+c).change(function(){ show_search_cities(c); });
        function show_search_cities(e) {
            var country = $(parent_div+' '+e).val();
            $(parent_div+' '+city_div).text('');
            <?php if(showfield('city')) { ?>
                $(parent_div+' '+city_div).text('');
            <?php } ?>

            if(city < 1) return true;

            loader($(e).parents(parent_div).find(city_div));
            $.ajax({
                type: "GET",
                url: "<?php bloginfo('template_url'); ?>/ajax/cities.php",
                <?php if(showfield('city')) { ?>
                    data: "id=" + country +"&selected=<?php echo $state ?>&hide_empty=1&class=col100&state=yes&select2=yes",
                <?php } else { ?>
                    data: "id=" + country +"&selected=<?php echo $city ?>&hide_empty=1&class=col100&select2=yes",
                <?php } ?>
                success: function(data){
                    $(e).parents(parent_div).find(city_div).html(data + '<div class="formseparator"><'+'/div>');
                    if($(window).width() > "960") { $('.select2').select2(); }
                }
            });
        }

        <?php if(showfield('city')) { ?>
            $(parent_div).on("change", city_c, function(){
                show_search_cities_when_cities(city_c);
            });
            function show_search_cities_when_cities(e) {
                var state = $(parent_div+' '+e).val();
                $(parent_div+' '+city_div).text('');
                if(state < 1) {
                    return true;
                }

                loader($(e).parents(parent_div).find(state_div));
                $.ajax({
                    type: "GET",
                    url: "<?php bloginfo('template_url'); ?>/ajax/cities.php",
                    data: "id=" + state +"&selected=<?php echo $city ?>&hide_empty=1&class=col100&select2=yes",
                    success: function(data){
                        $(e).parents(parent_div).find(state_div).html(data + '<div class="formseparator"><'+'/div>');
                        if($(window).width() > "960") { $('.select2').select2(); }
                    }
                });
            }
        <?php } // if showfield('state') ?>


    });
    </script>



    <form action="<?php echo get_permalink(get_option('search_page_id')); ?>" method="post" class="search-menu">
        <input type="hidden" name="action" value="search" />

        <div class="form-input l ">
            <select name="gender" class="select2 drp-gender">
                <option value="">Seeking a...</option>
                <?php foreach($gender_a as $key=>$gender) { if(in_array($key, $settings_theme_genders)) { echo '<option value="'.$key.'">'.$gender.'</option>'; } } ?>
            </select>
        </div> <!-- gender --> 
        <div class="clear-width"></div>

        <div class="form-input l">


        <?php
        $args = array(
            'show_option_none'   => 'Located in...',
            'orderby'            => 'name',
            'order'              => 'ASC',
            'show_last_update'   => 0,
            'show_count'         => 0,
            'hide_empty'         => 1,
            'selected'           => 0,
            'hierarchical'       => 1, 
            'name'               => 'city',
            'id'                 => '',
            'class'              => 'search-cities-input drp-city select2',
            'depth'              => 1,
            'tab_index'          => 0,
            'taxonomy'           => $taxonomy_location_url );
        wp_dropdown_categories( $args );
        ?>

        </div> <!-- country --> 





            <input type="submit" name="submit" value="Search" class="submit-button" />



    </form>

</div> 

Read more here:: Simplifying Autocomplete Custom City Country State Taxonomy

Leave a Reply

Your email address will not be published. Required fields are marked *