Question

我想用jquery编写实时搜索（mysql）代码。有四个搜索参数（lastname，forename，startdate，enddate），它们应根据所有框中的输入执行实时搜索（AND）。使用datepicker小部件选择日期。

虽然我的代码使用前缀和姓氏正常工作，但输入字段上的.keyUp（）无法识别添加和更改的日期（但会显示在输入字段中）。

如何在不破坏姓名的情况下使日期有效？

脚本（放在文档末尾）：

 -- plain html stripped --
 lastname <input id="lastname" type="text" name="lastname" />
 <br />
 forename <input id="forename" type="text" name="forename" />
 <br />
 startdate <input id="startdate" type="text" name="startdate" />
 <br />
 enddate <input id="enddate" type="text" name="enddate" />    

<script>
$(function() {
      var dateOptions = {
            showMonthAfterYear: false,
            showOn: 'both',
            yearRange: "-40:+10",
            changeYear: true,
            changeMonth: true,
        };  
$( "#startdate" ).datepicker(dateOptions);
$( "#enddate" ).datepicker(dateOptions);
});
</script>
<script>
$('input').keyup(function () {
var inputData = [];
$('input').map(function () {
    inputData.push({"name" : this.name, "value" : this.value});
}).get();

$.ajax({ 
    type: "POST",
    url: "dbquery.php",             
    data: inputData,
    dataType: "html", 
    success: function(response){                    
        $("#responsecontainer").html(response); 
        return response;
    }});
});

Answer 1

由于您没有使用键盘与其进行交互，因此不会在datePicker上触发关键事件。听取change事件（/同样）：

替换： $('input').keyup(function () {...

使用$(':input').on("keyup change", function () {...

Answer 2

拥有一个日期选择器的目的是避免手动输入日期，因为这有很多问题需要重新格式化，验证等等。所以你不应该为它们使用关键事件。实际上，请考虑在这些输入上使用readonly属性。

请参阅datepicker.onSelect()以获取所选日期：

http://api.jqueryui.com/datepicker/#option-onSelect

在我看来，最简单的方法是在进行AJAX调用之前汇总所有数据，而不是使用事件。在这种情况下，您将使用getDate()函数：

http://api.jqueryui.com/datepicker/#method-getDate

Answer 3

除了moob的答案，你可以使用jQuery的.change（）事件 - .on的快捷方式（“更改”，处理程序）

https://api.jquery.com/change/

Jquery：keyup-input没有检测到datepicker

3 个答案: