0

几天来，我一直在尝试让 jQuery 自动完成功能正常工作。现在我已经可以在文本框中输入它，它准确地显示了我想要的内容，但我的问题是当我点击我想要的那个时，它没有显示在文本框中。我知道这与自动完成有关，但我一生都无法弄清楚。如果有人可以提供帮助，将不胜感激。

索引.php

<?php require('_php/functions.php') ?>
<!DOCTYPE HTML>
<html><head>
  <title>simple_light</title>
  <link rel="stylesheet" href="_style/main.css" />
</head>
<body>
            <h1> Autocomplete with jQuery</h1>
            <input type="text" name="autosuggest" id="autosuggest" onKeyUp="autoSuggest();"/>
            <div id="autosuggest-container"></div>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
            <script src="_scripts/functions.js"></script>
</body>
</html>

函数.js

function autoSuggest(){

var autosuggestVal = $('#autosuggest').val();

    if (autosuggestVal != ''){
        $.ajax({
            url: '_php/ajax/autosuggest.php?query='+autosuggestVal,
            success: function(result){
                $('#autosuggest-container').html(result);
            }
        });
    }

}

函数.php

<?php 
require('config.php');

function autoSuggest($query){

    $connect = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die(mysql_error());
    mysql_select_db(DB_NAME, $connect);

    $sql = "
    SELECT Location.LocationID, CONCAT_WS(' ', SystemName, SiteNameLocation, SiteAddress1, SiteCity, SiteProvince, SitePostalCode) as expr2 
    FROM Location 
    WHERE Location.SystemName like '%".mysql_real_escape_string($query)."%'
    OR Location.SiteNameLocation like '%".mysql_real_escape_string($query)."%'
    OR Location.SiteAddress1 like '%".mysql_real_escape_string($query)."%'
    OR Location.SiteCity like '%".mysql_real_escape_string($query)."%'
    OR Location.SiteProvince like '%".mysql_real_escape_string($query)."%'
    OR Location.SitePostalCode like '%".mysql_real_escape_string($query)."%'
    ";

    $result = mysql_query($sql, $connect);
    $totalRows = mysql_num_rows($result);

    if ($totalRows > 0){
        $items = '<ul class="autosuggest">';

        while ($row = mysql_fetch_assoc($result)){

            $items .= '<li>'.$row['expr2'].'</li>';

        }

        $items .= '</ul>';

    }
    else{
        $items = 'no results found';
    }

    echo $items;

}
?>

自动建议.php

<?php 
require('../functions.php');
autoSuggest($_GET['query']);
?>
4

1 回答 1

0

我强烈怀疑您没有在建议中提供点击事件处理程序 - 如果您不告诉它如何设置值，它怎么知道如何设置？

看这个粗略的例子（我每次都模拟一个简单的“hello”响应的ajax调用）

http://jsfiddle.net/KyleMuir/X2K4K/2/

我在 JS 中而不是在对象上连接这两个事件 - 更容易和更好。

$('#autosuggest').on('keyup', autoSuggest);
$('#autosuggest-container').on('click', setValue)

如您所见，keyup 事件绑定到 autosuggest id，onclick 事件绑定到 autosuggest-container。

单击自动建议容器（也就是您要选择的项目）时，它会设置值。

注意：在您的示例中，您可能需要将您感兴趣的项目传递给 setValue 函数。YMMV

希望这可以帮助。

于 2013-09-17T02:45:10.040 回答