顯示autosuggest下拉菜單上的div點擊

我希望有人能夠幫助解決這個問題。我有一個基本的autosuggest下拉頁面，我想要一個特定的div「con」隱藏，如果url（index.php）中的變量「id」沒有設置，然後顯示它是否組。這背後的想法與Google類似，因爲當用戶首次訪問index.php時，他們看不到任何結果，因爲它們顯示在最初隱藏的「con」div中。當用戶在搜索框中輸入內容，然後單擊下拉結果時，會顯示con div，其中包含基於用戶單擊的特定結果的動態內容。請你幫助，因爲當前用戶訪問索引頁時顯示的是con div，如果有更好的方法可以實現這一點，請告訴我。我有3個文件index.php; search.php中;和index.js。我遺漏了一個基本的connect.php文件。「名稱」表包含2列 - 「id」和「name」。顯示autosuggest下拉菜單上的div點擊

的index.php：

<html> 
<head> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.elastic.js"></script> 
<link rel="stylesheet" type="text/css" href="status.css"> 
<title>Test</title> 
<script type="text/javascript"> 

$(document).ready(function() { 

    function getUrlVars() 
    { 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes.split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 

    return vars; 
    } 
    var id = getUrlVars()["id"]; 

    $(".con").hide(); 

    if($(id!='undefined')); 
    { 
    $(".con").show(); 
    } 

}); 

</script> 
</head> 
<body> 
    <h1>Test</h1> 

    <div class="c_search"> 

    <span id='box'> 
     <input type ='text' id='search_box' /> <button id="search_botton">Search</button> 
    </span> 

    <div id='search_result'> 
    </div> 

    <script src='index.js'></script> 
    </div> 


    <div class="con"> 
    Show me/Don't show me 
    </div> 
</body> 
</html>

的search.php：

<?php 

include 'connect.php'; 

// please, be more careful about SQL injection... use some protection at least... 
//$value = $_POST['value']; 
$value = mysql_real_escape_string($_POST['value']); 

$query = mysql_query("SELECT * FROM names where name like '%$value%'"); 
while($run = mysql_fetch_array($query)){ 
    $name = $run['name']; 
    $id = $run['id']; 

    echo '<a href=index.php?id='.$id.'>'.$name.'<br/>'; 
} 

?>

index.js：

$(document).ready(function(){ 

    var left = $('#box').position().left; 
    var top = $('#box').position().top; 
    var width = $('#box').width(); 


    $('#search_result').css('left', left).css('top', top+32).css('width', width); 

    $('#search_box').keyup(function(){ 
    var value = $(this).val(); 

    if(value != '') { 
     $.post('search.php', {value: value}, function(data){ 
     $('#search_result').html(data); 
     }); 
    } 
    }); 
});

來源

2014-07-17 Oroku

看來你與你的JS代碼中的錯誤（在getUrlVars功能）：

function getUrlVars() 
{ 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&'); 

    for(var i = 0; i < hashes.length; i++) 
    { 
    // you're splitting the entire array, you should split 1 item so hashes[i] 
    // hash = hashes.split('='); 
    hash = hashes[i].split('='); 
    vars.push(hash[0]); 
    vars[hash[0]] = hash[1]; 
    } 

    return vars; 
}

而且你不關閉一個標籤：echo '<a href=index.php?id='.$id.'>'.$name.'</a><br/>'

來源

2014-07-17 08:35:44 mTorres

顯示autosuggest下拉菜單上的div點擊

回答

相關問題