Question

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

当我在任何drop-menues中按下某个键时，mysql连接列表会丢弃但不会在实际的'input-type-search-box'下面。
在第一个菜单中按一个键，其他菜单在删除的列表下面移动，但菜单/“输入类型搜索框”实际上应保持彼此相邻。

这可能只是一个简单的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>';
}   
}

?>

Answer 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>';

下拉搜索菜单列表不会丢失

1 个答案: