Javascript 如何让jQuery键盘插件与List.js一起工作？
我目前正在为自动停车系统设计一个用户界面。其中一个页面（车库状态）有一个表，其中包含车位号及其对应的车票号。代客泊车员必须能够在搜索框中键入车位号或车票号，当他键入每个字母时，表格中的选项将根据他键入的内容进行过滤。为此，我使用List.js，但是，我还需要一个屏幕键盘，以便代客输入数字，为此我使用jQuery键盘插件。不幸的是，只有当我直接从笔记本电脑键盘输入时才执行过滤，而不是在使用键盘插件时。如果有人能就如何解决这个问题提供一些意见，我将不胜感激Javascript 如何让jQuery键盘插件与List.js一起工作？,javascript,jquery,Javascript,Jquery,我目前正在为自动停车系统设计一个用户界面。其中一个页面（车库状态）有一个表，其中包含车位号及其对应的车票号。代客泊车员必须能够在搜索框中键入车位号或车票号，当他键入每个字母时，表格中的选项将根据他键入的内容进行过滤。为此，我使用List.js，但是，我还需要一个屏幕键盘，以便代客输入数字，为此我使用jQuery键盘插件。不幸的是，只有当我直接从笔记本电脑键盘输入时才执行过滤，而不是在使用键盘插件时。如果有人能就如何解决这个问题提供一些意见，我将不胜感激 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<title>Garage Status</title>
<head>
<!-- Import materialize.css -->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="font/material-design-icons/material.css" rel="stylesheet" />
<!--Import jQuery before materalize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
<script>
$(document).ready(function(){
$('#grgKeypad').keypad({target: $('.search'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
});
});
</script>
</head>
<body>
<!--Page Title Panel-->
<div class="card-panel">
<h4>GARAGE STATUS</h4>
<!--Options button, reveals dropdown menu with options to switch to other pages-->
<a id="optionsbtn" class='dropdown-button btn-large' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
<!--Quick access buttonss to inpark and outpark menus-->
<a id="quick_outpark_btn" class="waves-effect waves-light btn-large" href="outmenu.html">OUTPARK</a>
<a id="quick_inpark_btn" class="waves-effect waves-light btn-large" href="inmenu.html">INPARK</a>
</div>
<!--Dropdown menu structure and it's items-->
<ul id="dropdown1" class="dropdown-content">
<li><a href="dashmenu.html">Dashboard</a></li>
<li class="divider"></li>
<li><a href="inmenu.html">Inpark</a></li>
<li class="divider"></li>
<li><a href="outmenu.html">Outpark</a></li>
<li class="divider"></li>
<li><a href="shufflemenu.html">Shuffle</a></li>
<li class="divider"></li>
<li><a href="qmenu.html">Outpark Queue Menu</a></li>
<li class="divider"></li>
<li><a href="transactions.html">Transactions</a></li>
</ul>
<!--Dashboard Button, press to return to dashboard-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
<!--Home icon-->
<i class="material-icons" style="font-size: 48px"></i>
</a>
</div>
<!--Form that takes ticket number or spot number and searches for that car's ticket number and spot number-->
<!--Note that the search form shouldn't be sending data back to the server to search for the car, the data should already be loaded onto the page and the search should be performed with the already loaded data or something like that idk if you want to change-->
<div id="locations">
<div class="row">
<form class="col s7" style="margin: 0px; padding: 0px;">
<div class="row">
<div class="input-field col s9">
<input placeholder="Enter ticket or spot number" id="search" type="search" class="search">
<label for="search"><i class="material-icons" id="searchicon"style="font-size: 48px"></i></label>
</div>
</div>
</form>
</div>
<!--Table that displays cars in the garage-->
<!--Data will be dynamically displayed, currently these are just placeholder data-->
<div class="table" id="searchtable">
<table class="centered striped bordered scroll">
<thead>
<tr>
<th>Spots</th>
<th>Ticket Number</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="spot">1-22-35</td>
<td class="ticketnum">696969</td>
</tr>
<tr>
<td class="spot">1-22-34</td>
<td class="ticketnum">696968</td>
</tr>
<tr>
<td class="spot">6-22-33</td>
<td class="ticketnum">696967</td>
</tr>
<tr>
<td class="spot">1-22-32</td>
<td class="ticketnum">696966</td>
</tr>
<tr>
<td class="spot">8-22-31</td>
<td class="ticketnum">696965</td>
</tr>
<tr>
<td class="spot">8-22-30</td>
<td class="ticketnum">696964</td>
</tr>
<tr>
<td class="spot">1-22-39</td>
<td class="ticketnum">696953</td>
</tr>
</tbody>
</table>
</div>
<!--Div containing the keypad-->
<div id="grgKeypad"></div>
<!--Import List.js-->
<script src="list.js"></script>
<script>
var options = {
valueNames: ["spot","ticketnum"]
};
var userList = new List("locations",options);
</script>
</body>
</html>
车库状态
$（文档）.ready（函数（）{
$（'#grgKeypad'）。小键盘（{target:$（'.search'），布局：['789'+$.keypad.CLEAR，'456'+$.keypad.BACK，'1230-']
});
});
车库状态
；
斑点
车票号码
1-22-35
696969
1-22-34
696968
6-22-33
696967
1-22-32
696966
8-22-31
696965
8-22-30
696964
1-22-39
696953
变量选项={
valueNames:[“现货”、“票券金额”]
};
var userList=新列表（“位置”，选项）；