Question

我正在尝试使用我的实时搜索代码并添加一个下拉框，以便我的用户可以选择他们想要搜索的类别而不是显示所有内容。我无法将下拉信息发布到结果页面。

这是我的搜索页面

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
var dropdownid = $(this).val();
var dataString = 'search='+ searchid + 'dropdown='+ dropdownid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "test2.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;    

});

jQuery("#result").live("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut(); 
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
.content2{
    width:900px;
    margin:0 auto;
}
#searchid
{
    width:300px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
}
#result
{
    position:absolute;
    width:300px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{
    padding:10px; 
    border-bottom:1px #999 dashed;
    font-size:15px; 
    height:50px;
}
.show:hover
{
    background:#6A92F0;
    color:#FFF;
    cursor:pointer;
}
</style>
<!--  --><br>
<h3 class="red">Search for a device</h3>
&nbsp;Type in the device name, serial number, or category.<br><br>
<input type="text" class="search" id="searchid" placeholder="&nbsp;Search" />&nbsp;        &nbsp; <br /> 
<div id="result">
</div>
<select id="dropdown">
<option id="dropdownid" value="test">test</option>
</select>

仅使用实时搜索时效果很好，但我无法让下拉列表正常工作。

Answer 1

将行var dropdownid = $(this).val();替换为var dropdownid = $("#dropdown").val();

使用DropDown进行PHP实时搜索

1 个答案: