0

我有 4 个相互关联的搜索下拉菜单。我有两个问题：

  1. 当我在任何下拉菜单中按下一个键时，mysql-connected 列表会下降，但不在实际的“输入类型搜索框”下方。

  2. 此外，例如，当我在第一个菜单中按下一个键时，其他菜单会在下拉列表下方移动，但菜单/“输入类型搜索框”实际上应保持固定在彼此旁边。

这可能只是一个简单的 css 问题，但我现在尝试了很多东西，但我无法让它工作很长一段时间，所以我发布了它。谢谢你的帮助！

这是代码：HTML

<input type="text" class="autosuggest" id="autosuggest1" placeholder="Select Continent...">
    <div class="type">
        <ul class="result" id="result1"></ul>
    </div>
<input type="text" class="autosuggest" id="autosuggest2" placeholder="Select Country...">
    <div class="type">
        <ul class="result" id="result2"></ul>
    </div>
<input type="text" class="autosuggest" id="autosuggest3" placeholder="Select Area...">
    <div class="type">
    <ul class="result" id="result3"></ul>
    </div>
<input type="text" class="autosuggest" id="autosuggest4" placeholder="Select Category...">
    <div class="type">
    <ul class="result" id="result4"></ul>
    </div>

CSS

    #search_line{
        margin-top: 20px;
        display: inline;
    }
.autosuggest, .type, .result{
    width: 150px;
}
#autosuggest1{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
#autosuggest2{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
#autosuggest3{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
#autosuggest4{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
.result{
    width: 150px;
    list-style: none;
}
.result li{
    padding:5px;
    border:1px solid #000;
    border-top: 0;
    cursor: pointer;
}

JS

$(document).ready(function() { 
$('#autosuggest1').keyup(function() {
    var continent = $(this).attr('value');
    $.post('php/dropdown.php', {continent:continent},  function(data) {
        $('#result1').html(data);

        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest1').attr('value', result_value);
            $('#result1').html('');
        });
    });
});

$('#autosuggest2').keyup(function() {
    var country = $(this).attr('value');
    $.post('php/dropdown.php', {country:country}, function(data) {
        $('#result2').html(data);

        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest2').attr('value', result_value);
            $('#result2').html('');
        });
    });
});

$('#autosuggest3').keyup(function() {
    var area = $(this).attr('value');
    $.post('php/dropdown.php', {area:area}, function(data) {
        $('#result3').html(data);

        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest3').attr('value', result_value);
            $('#result3').html('');
        });
    });
});

$('#autosuggest4').keyup(function() {
    var category = $(this).attr('value');
    $.post('php/dropdown.php', {category:category}, function(data) {
        $('#result4').html(data);

        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest4').attr('value', result_value);
            $('#result4').html('');
            $('#result4').focusout('');
        });
    });
});

});

这里还有 PHP

<?php
include '../core/db/connectdropdown.php';

if (isset($_POST['continent']) == true && empty($_POST['continent']) == false) {
$continent = mysql_real_escape_string($_POST['continent']);
$query = mysql_query("SELECT DISTINCT `continent` FROM `area` WHERE `continent` LIKE   '$continent%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>', $row['continent'], '</li>';
}   
}

if (isset($_POST['country']) == true && empty($_POST['country']) == false) {
$country = mysql_real_escape_string($_POST['country']);
$query = mysql_query("SELECT DISTINCT `country` FROM `area` WHERE `country` LIKE     '$country%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    $dbcountry = $row['country'];

}   
}

if (isset($_POST['area']) == true && empty($_POST['area']) == false) {
$area = mysql_real_escape_string($_POST['area']);
$query = mysql_query("SELECT DISTINCT `area` FROM `area` WHERE `area` LIKE '$area%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>', $row['area'], '</li>';
}   
}

if (isset($_POST['category']) == true && empty($_POST['category']) == false) {
$category = mysql_real_escape_string($_POST['category']);
$query = mysql_query("SELECT `category` FROM `categories` WHERE `category` LIKE '$category%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>', $row['category'], '</li>';
}   
}

?>
4

1 回答 1

1

听起来您可能也遇到了一些 JavaScript 问题。您的脚本是按 ID 还是按类别附加列表的结果？只是好奇。

我没有看到您发布的 CSS 和 HTML 有任何明显的问题，但我尝试在这个小提琴中稍微更改 HTML 和 CSS 结构。也许它可以为您改善：

http://jsfiddle.net/w8zG6/

如果你使用我的 CSS/HTML 会发生什么。你能得到更好的结果吗？（也许更糟？）

如果这没有帮助，您可以发布处理创建菜单的 JavaScript 吗？

编辑：

您的 PHP 中似乎存在问题：

在您的其他 Ajax 处理程序代码块中，您有以下内容：

echo '<li>', $row['continent'], '</li>';

而您的国家/地区处理代码有：

$dbcountry = $row['country'];

尝试用以下内容替换该行：

echo '<li>', $row['country'], '</li>';
于 2012-05-28T22:23:20.030 回答