自动完成不显示准确答案它显示所有选项答案

【问题标题】：autocomplete does not display accurate answer it displays all options自动完成不显示准确答案它显示所有选项
【发布时间】：2015-02-03 17:09:02
【问题描述】：

我有一个页面，我必须在选择状态下拉列表时显示地区下拉列表。然后在选择区域下拉列表时显示邮局下拉列表。然后在选择邮局下拉菜单时自动完成输入框。

我成功完成了。但是地方的自动完成输入框不会根据输入的关键字显示选项，天气它会显示所有输入关键字的选项。

下面是我的php页面：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="js/jquery-ui.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<?php
    $r = file('app_data/in.txt');
    $states = array();
    foreach($r as $value){
        $x = explode("\t",$value);
        //$india[] = array('pin'=>$x[1], 'place' => $x[2], 'state' => $x[3], 'dist' => $x[5] );
        $states[] = $x[3];
    }
    $states = array_unique($states);
    sort($states);
    echo '<select id="state">';
    foreach($states as $state){
        echo "<option> $state </option>";
    }
    echo '</select>';
    foreach($_POST as $post){
        echo $post;
    }
    echo '<select id="dist">';
    echo '</select>';

    echo '<select id="postoffice">';
    echo '</select>';

?>
<script>
    $('#state').focusout(function (){
        $.get('func-get-dist.php',{'state' : $(this).val()},function(data){
            $('#dist').html(data);
        });
    });
    $('#dist').focusout(function (){
        $.get('func-get-dist.php',{'state' : $('#state').val(),'dist' : $(this).val()},function(data){
            $('#postoffice').html(data);
        });
    });
    $('#postoffice').focusout(function (){
            var postoffice = $(this).val();
            $('#tags').autocomplete({
                source : ("func-get-dist.php?postoffice="+postoffice),
            });
    });


</script>
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>
<div id="test">
<div id="test1">
</div>
</body>
</html>

下面是我的 html-get-dist.php 页面：

<?php 
if(isset($_GET['postoffice']) && !empty($_GET['postoffice'])){
    $postoffice = $_GET['postoffice'];
    $r = file('app_data/in.txt');
    $places = array();
    foreach($r as $value){
        $x = explode("\t",$value);
        if(strtolower($x[7]) == $postoffice){
            $places[] = strtolower(trim($x[2]));
        }
    }
    $places = array_unique($places);
    sort($places);
    echo json_encode($places);
}elseif(isset($_GET['state']) && !empty($_GET['state'])){
    if(isset($_GET['dist']) && !empty($_GET['dist'])){
        $state = $_GET['state'];
        $dist = $_GET['dist'];
        $r = file('app_data/in.txt');
        $posts = array();
        foreach($r as $value){
            $x = explode("\t",$value);
            if(($x[3] == $state) && ($x[5] == $dist)){
                //echo $x[6].'-'.$x[7].'-'.$x[8].'<br>';
                $posts[] = $x[7];
            }
        }
        $posts = array_map('strtolower',$posts);
        $posts = array_unique($posts);
        sort($posts);

        foreach($posts as $postoffice){
            echo '<option>'.$postoffice.'</option>';
        }
    }else{
        $state = $_GET['state'];
        $r = file('app_data/in.txt');
        $dists = array();
        foreach($r as $value){
            $x = explode("\t",$value);
            if($x[3] == $state){
                $dists[] = $x[5];
            }
        }
        $dists = array_unique($dists);
        sort($dists);

        foreach($dists as $dist){
            echo '<option>'.$dist.'</option>';
        }
    }
}
?>

【问题讨论】：

'app_data/in.txt' 长什么样子？
IN 744103 School Line Andaman & Nicobar Islands 01 South Andaman Port Blair 11.6651 92.7121 1 IN 744103 Minnie Bay Andaman & Nicobar Islands 01 South Andaman Portblair 11.6651 92.7121 1 IN 744103 Ograbanj Andaman & Nicobar Islands 11.6651 92.7121 1 IN 744104 Sitapur Andaman & Nicobar Islands 01 South Andaman Port Blair 11.6651 92.7121 1 IN 744104 Aberdeen Bazar Andaman & Nicobar Islands 01 South Andaman Port Blair 11.6651 92.7121 1

标签： php jquery ajax autocomplete

【解决方案1】：

您将用户输入与整个值进行比较，尝试使用与用户输入的字符数相同的字符进行比较：

foreach($r as $value){
    $x = explode("\t",$value);
    $charCount = strlen($postoffice);
    if(strtolower(substr($x[7], $charCount)) == strtolower($postoffice)){
        $places[] = strtolower(trim($x[2]));
    }
}

编辑：我花了一些时间才弄明白，但我想我有解决办法。您的代码中有两个错误：

在 js 中，您使用var postoffice = $(this).val(); 获取选择的值，但.val() 返回选择框的选定索引，而不是选定的文本。
您将所选邮局与$x[7] 进行比较，这是您数据中的第 8 个制表符分隔列，如果我的计数正确，您那里只有 7 列。

所以我的猜测是，在这里你将undefined 与0 进行比较，然后返回true：

if(strtolower($x[7]) == $postoffice){

要解决这个问题，请像这样在 js 中获取值：

 var postoffice = $("option:selected", this).text();

...并在 php 比较中使用正确的索引。

【讨论】：

当您使用 url 作为来源时，自动完成不会过滤结果。您需要在服务器端对其进行过滤。见：api.jqueryui.com/autocomplete
尝试与用户输入的字符数相同的比较解决了我的问题。感谢您的解决方案。