0

4つの依存検索ドロップダウンメニューが隣り合っています。私には2つの問題があります：

  1. ドロップメニューのいずれかでキーを押すと、mysqlに接続されたリストはドロップしますが、実際の「input-type-search-box」の下にはドロップしません。

  2. また、たとえば最初のメニューのキーを押すと、他のメニューはドロップされたリストの下に移動しますが、メニュー/「input-type-search-boxes」は実際には互いに隣接して固定されたままになります。

これは単純な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 に答える