Jquery 使用键向上和向下键循环选择列表项
Jquery Select list items in loop using keyup and key down
我正在尝试在Jquery,ajax和json中进行自动建议,以便在用户注册网站时搜索城市。
到目前为止,我能够从数据库中获得结果。我附加到列表,但现在我需要使用向上向下选择数据并输入键。
键下事件是将类添加到第一个城市。但是我想使用向上和向下键遍历所有结果,并在用户点击 Enter 时向城市文本框添加值。我在 php 中将数据限制为 5,因此列表项中有 5 个结果。
这是我的代码:
$('#city').keyup(function (event) {
var input_query = $(this).val();
$.post("get_city.php", {
"query": input_query
}, function (data) {
$('#cityres').html("");
$.each(data, function (i, item) {
$('#cityresults').append("<li>" + item.city + "</li>");
});
}, "json");
//below code is for key event
var key = gtKeycode(event);
if (key == 40) {
// I am not sure i need to do this way
$('li').first().addClass('SelectedCity');
}
});
function gtKeycode(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
return code;
}
我想我现在有解决您问题的方法,希望这会对您有所帮助..!
-
我制作了一个回显 json 编码的 php 文件,只需列出以下内容:
//PHP "action.php?action=show" e.g $option[] = array( 'option0'=>".Choose an option", 'option1'=>'somepage1', 'option2'=>'somepage2', 'option3'=>'somepage3'); echo json_encode(array('options'=>$option));
-
我编造了 html 作为输出的处理程序,然后将附加
<select class="myoptions"> </select> | <span class="optcap"></span>
-
.JS
function selectedOption() { var myoptions = $(".myoptions"); $.ajax({ type:'GET', url:'action.php?action=show', dataType:'JSON', success:function(data){ if(data.s==1){ myoptions.empty(); $.each(data.options, function(x,val){ myoptions.append("<option class='option' value='"+val.option0+"'>"+val.option0+"</option>" +"<option class='option' value='"+val.option1+"'>"+val.option1+"</option>" +"<option class='option' value='"+val.option2+"'>"+val.option2+"</option>" +"<option class='option' value='"+val.option3+"'>"+val.option3+"</option>"); }); } } }); } $(document).ready(function(){ selectedOption(); $(".myoptions").keyup(function(){ var option = []; $("option.option:selected").each(function(x){ option[x] = $(this).val(); }); $(".optcap").html("["+option+"]"); }); });
相关文章:
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在php中的jquery中对循环内的选择框值求和
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 用于使用javascript循环选择选项
- 循环遍历元素jquery选择器
- 循环选择标记并创建数组或字符串
- 在 while 循环中选择与整数值对应的数组
- 使用循环填充选择
- 使用 for 循环用逗号分隔的值填充选择元素
- 如何在每个循环中选择空输入
- javascript循环选择特定项目
- jquery:如何循环选择多个项目
- Javascript 循环选择所有矩形
- Jquery 使用键向上和向下键循环选择列表项
- jQuery循环选择的最佳方法
- 在Javascript中使用循环选择id的数量
- 通过循环选择复选框
- For循环选择特定的id并更改它们的样式- js
- 为什么我的Javascript循环返回时未定义?如何使用为循环选择对象
- jQuery循环选择并设置所选选项