Question

我的网站上有一个国家，州，城市输入字段，我正在尝试构建一个自动完成功能，该功能将显示数据库中列出的当前选项。这就是我所拥有的，我根本无法工作，而且我现在陷入困境。

HTML

<form class="form-inline" role="form" method="get" name="form1" action="searchresults.php"                onsubmit="return checkRequired();">

                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">Country</label>
                        <input type="text" name="country"  class="form-control input-lg" id="country" style="font-size:15px;" placeholder="Country">
                    </div>

                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">State</label>
                        <input type="text" name="state" class="form-control input-lg" id="state" style="font-size:15px;" placeholder="State">
                    </div>


                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail2">City</label>
                        <input type="text" name="city" class="form-control  input-lg" style="font-size:15px;" id="city" placeholder="City">
                    </div>
                    <br>
                    <br>
                    <button type="submit" class="btn btn-default">Search Photographers</button>
                    <input type="hidden" name="country_select" id="country_select" value="" />

                    <input type="hidden" name="state_select" id="state_select" value="" />

                </form>

的javascript

<script type="text/javascript">
$(function() {

//autocomplete

$("#country").autocomplete({
    source: "search_country.php",
    minLength: 1,
    delay:10,
    select: function(event, ui) {
        $("#country_select").val(ui.item.value);
        $("#state").autocomplete(
            {
                source: "search_state.php?country=" + $('#country_select').val(),
                minLength: 1,
                    selectFirst: false
            }
            );  

         }
}); 





$("#state").autocomplete({
    source: "search_state.php?country=" + $('#country_select').val(),
    minLength: 1,
     delay:10,
    select: function(event, ui) {
        $("#state_select").val(ui.item.value);
        $("#city").autocomplete(
            {
                source: "search_city.php?state=" + $('#state_select').val(),
                minLength: 1,
                    selectFirst: false
            }
            );  

         }
}); 

$("#city").autocomplete(
{
    source: "search_city.php?state=" + $('#state_select').val(),
    minLength: 1,
    selectFirst: false
}
);  


});

search_country.php

<?php
require_once('includes/mysqli_connection.php');
if (isset($_GET['term'])){
    $return_arr = array();

    $query = "SELECT country FROM qls3_users where country like '%".$_GET['term']."%' group by country";
    $rs=mysqli_query($query) or die(mysql_error());
        if(mysqli_num_rows($rs)>0)
        {
            while($row=mysqli_fetch_array($rs))
            {   
                $return_arr[] =  $row['country'];
            }           
        }
/* Toss back results as json encoded array. */
   echo json_encode($return_arr);
}


?>

从mysql db获取自动完成功能

0 个答案: