[英]How can I change the search form to separate single digits fields?
我有一个多字符搜索字段,它通过 AJAX 获取 WoocCommerce 产品数据并且工作正常。
当前搜索字段
我需要将搜索字段拆分为单个 6 位数字框,这是我可以使用的表单示例:
<form>
<input type="number" name="abc" min="0" max="9">
<input type="number" name="abc" min="0" max="9">
<input type="number" name="abc" min="0" max="9">
<input type="number" name="abc" min="0" max="9">
<input type="number" name="abc" min="0" max="9">
<input type="number" name="abc" min="0" max="9">
</form>
如何将我的搜索字段的字符串拆分为多个个位数的搜索字段?
我的前端代码
<input type="text" name="keyword" id="keyword" onkeyup="fetch()">
<div id="datafetch">Your numbers will show here</div>
<script>
function fetch(){
$.post('<?php echo admin_url('admin-ajax.php'); ?>',
{'action':'my_action'},
function(response){
$('#datafetch').append(response);
console.log(result);
});
}
</script>
函数中的代码.php
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$myquery = esc_attr( $_POST['keyword'] );
}
使用您建议的脚本,但在每个输入字段中放置标签索引:
然后做一些 UX 任务:
现在您有了用户友好的分隔输入框。 但是您必须在提交给 WordPress admin-ajax 以传递给您的 function 之前集成它们的输入值,或者您可以单独发送它们并将它们集成到服务器端 ZC1C425268E68385D1AB5074C17A9 中。
这是演示:
function fetch(){ $('#keyword').val() = $('#input1').val() + $('#input2').val() + $('#input3').val() + $('#input4').val() + $('#input5').val() + $('#input6').val(); //rest of your function } $(function() { $("input").keydown(function (e) { if(e.keyCode == 8) { $(this).prev().focus(); } if (this.value.length == this.maxLength) { $(this).val(''); } }); $("input").keyup(function () { if (this.value.length == this.maxLength) { $(this).next().focus(); } }); });
input { height: 21px; background: #f1f1f1; border: 1px #c9c9c9 solid; border-radius: 3px; -moz-appearance: none; appearance: none; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <form> <input id="input1" type="number" min="0" max="9" tabindex="1" maxlength="1"> <input id="input2" type="number" min="0" max="9" tabindex="2" maxlength="1"> <input id="input3" type="number" min="0" max="9" tabindex="3" maxlength="1"> <input id="input4" type="number" min="0" max="9" tabindex="4" maxlength="1"> <input id="input5" type="number" min="0" max="9" tabindex="5" maxlength="1"> <input id="input6" type="number" min="0" max="9" tabindex="6" maxlength="1"> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.