我目前正在为自动停车系统设计UI。其中一个页面（车库状态）有一个表格，其中包含现场编号及其相应的票号。代客必须能够在搜索框中键入专色号或票号，并且当他键入每个字母时，表中的选项将根据他键入的内容进行过滤。我正在使用List.js，但是，我还需要一个屏幕键盘供代客输入数字，为此我使用jQuery Keypad插件。不幸的是，只有在我从笔记本电脑键盘直接输入时才进行过滤，而不是在我使用键盘插件时。如果有人能就如何解决这个问题提供一些意见，我将非常感激。
<!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>