dropdownmenu dicht
Ik heb een dropdownbox maar die gaat niet dicht als ik ergens buiten het menu klik, en ik kan geen code vinden om het idcht te doen
hier is js code
Quote:
$(document).ready(function() {
$('.autosuggest').keyup(function() {
var search_term = $(this).attr('value');
$.post('search1.php', {search_term:search_term}, function(data) {
$('.result').html(data);
});
});
});
$('.autosuggest').keyup(function() {
var search_term = $(this).attr('value');
$.post('search1.php', {search_term:search_term}, function(data) {
$('.result').html(data);
});
});
});
Alvasr bedankt
Ik ben vrij benieuwd hoe je je select box gemaakt hebt, meestal is dit namelijk niet het geval.
<input type="text" name="k" autocomplete="off" class="autosuggest" > <input type="submit" value="search">
<div class="dropdown">
<ul class="result"></ul>
</div>
</form>
Daniyal hussain op 04/07/2012 23:51:13:
maar die gaat niet dicht als ik ergens buiten het menu klik,
Die gaat nergens dicht; gelijk waar je op klikt. Die waarde komt ook niet terug in de <input>.
Ofwel heb je nog code die je ons niet toont.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
$search_term = mysql_real_escape_string($_POST['search_term']);
$terms = explode (" ", $search_term);
$query = "SELECT * FROM search WHERE ";
foreach ($terms as $each){
@$i++;
if ($i == 1)
$query .= "title LIKE '%$each%' ";
else
$query .= "OR title LIKE '%$each%' ";
}
if (isset($_POST['search_term']) == true && empty ($_POST['search_term']) == false)
{
$conclose= mysql_connect ("localhost", "root", "");
mysql_select_db("results");
$query = mysql_query ($query);
$numrows = mysql_num_rows ($query);
if(strlen($search_term) <= 2)
echo "<li><font color='#62472C'>Search term to short</font></>";
else
{
if ($numrows > 0) {
while (($row = mysql_fetch_assoc($query))!==false){
$id = $row ['id'];
$title = $row ['title'];
$image = $row ['image'];
$link = $row ['link'];
$keywords = $row ['keywords'];
echo " <li><a href='$link' class='uitmenu'><img style='float: left;' src='$image' width='60px' height='50px'/>$title</a></li>";
}
echo "<li><a href='search.php?k=$search_term' class='uitmenuget' >Get more results</a></li>";
}
else
echo "<li><font color='#62472C'>No games found for: $search_term </font></li>";
}
}
?>
$search_term = mysql_real_escape_string($_POST['search_term']);
$terms = explode (" ", $search_term);
$query = "SELECT * FROM search WHERE ";
foreach ($terms as $each){
@$i++;
if ($i == 1)
$query .= "title LIKE '%$each%' ";
else
$query .= "OR title LIKE '%$each%' ";
}
if (isset($_POST['search_term']) == true && empty ($_POST['search_term']) == false)
{
$conclose= mysql_connect ("localhost", "root", "");
mysql_select_db("results");
$query = mysql_query ($query);
$numrows = mysql_num_rows ($query);
if(strlen($search_term) <= 2)
echo "<li><font color='#62472C'>Search term to short</font></>";
else
{
if ($numrows > 0) {
while (($row = mysql_fetch_assoc($query))!==false){
$id = $row ['id'];
$title = $row ['title'];
$image = $row ['image'];
$link = $row ['link'];
$keywords = $row ['keywords'];
echo " <li><a href='$link' class='uitmenu'><img style='float: left;' src='$image' width='60px' height='50px'/>$title</a></li>";
}
echo "<li><a href='search.php?k=$search_term' class='uitmenuget' >Get more results</a></li>";
}
else
echo "<li><font color='#62472C'>No games found for: $search_term </font></li>";
}
}
?>
</qoute>
Zoiets?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
<style>
.dropdown {
background-color: #f1f1ff;
width: 300px;
}
</style>
</head>
<body>
<form name="form" action="search.php" method="get">
<input type="text" name="k" autocomplete="off" class="autosuggest" > <input type="submit" value="search">
<div class="dropdown">
<ul class="result"></ul>
</div>
</form>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
var hoverOut = 'idle';
$('.autosuggest').keyup(function() {
var search_term = $(this).attr('value');
$.post('search1.php', {search_term: search_term}, function(data) {
$('.result').html(data).show();
});
});
// we gaan in een variabele opslaan of de muis al dan niet over .dropdown hovert
$('.dropdown').hover(
function(e) {
hoverOut = 'active';
},
function(e) {
hoverOut = 'out';
}
);
// telkens de gebruiker de input gebruikt, mag .result zichtbaar zijn
$('.autosuggest').focus(function(e) {
$('.result').show();
});
// We vangen elke muisklik op. Indien de muis niet binnenin .dropdown is, verbergen we .result
$(document).click(function(e) {
switch (hoverOut) {
case 'out':
$('.result').fadeOut();
hoverOut = 'idle';
break;
// okay, het is hier nogal eenzaam, zo 1 optie, maar wie weet komt hier nog iets
}
});
});
</script>
</body>
</html>
<head>
<style>
.dropdown {
background-color: #f1f1ff;
width: 300px;
}
</style>
</head>
<body>
<form name="form" action="search.php" method="get">
<input type="text" name="k" autocomplete="off" class="autosuggest" > <input type="submit" value="search">
<div class="dropdown">
<ul class="result"></ul>
</div>
</form>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
var hoverOut = 'idle';
$('.autosuggest').keyup(function() {
var search_term = $(this).attr('value');
$.post('search1.php', {search_term: search_term}, function(data) {
$('.result').html(data).show();
});
});
// we gaan in een variabele opslaan of de muis al dan niet over .dropdown hovert
$('.dropdown').hover(
function(e) {
hoverOut = 'active';
},
function(e) {
hoverOut = 'out';
}
);
// telkens de gebruiker de input gebruikt, mag .result zichtbaar zijn
$('.autosuggest').focus(function(e) {
$('.result').show();
});
// We vangen elke muisklik op. Indien de muis niet binnenin .dropdown is, verbergen we .result
$(document).click(function(e) {
switch (hoverOut) {
case 'out':
$('.result').fadeOut();
hoverOut = 'idle';
break;
// okay, het is hier nogal eenzaam, zo 1 optie, maar wie weet komt hier nog iets
}
});
});
</script>
</body>
</html>
Gewijzigd op 05/07/2012 12:26:03 door Kris Peeters