Выберите элемент li со стрелками (вверх и вниз) с помощью Javascript (jQuery)

У меня возникла эта проблема ... У меня есть вход, который работает как поисковик, и когда я пишу что-то, он показывает ul со списком совпадений, и это работы, в <ul> и <li> элементы создаются с помощью PHP AJAXВыберите элемент li со стрелками (вверх и вниз) с помощью Javascript (jQuery)

Это мой вход

<input type="text" class="form-control" id="searchProduct" placeholder="Search..." />

Это <ul>

<ul id="list"> 
    <li id="match1" class="itemList"></li> 
    <li id="match2" class="itemList"></li> 
    <li id="match3" class="itemList"></li> 
</ul>

После того, как список формируется фокус еще на входе, и это нормально, но я хотел бы использовать клавиши со стрелками (вверх и вниз), чтобы выбрать один из пунктов

И я пытаясь с кодом, который я вижу в другом ответе, но он не работает для меня, я знаю, что я делаю что-то неправильно, но я не могу понять, в чем проблема ... это код javascript

var li = $('#list > li'); 
var liSelected; 
$(window).on('keydown', function(e){ 
    if(e.which === 40){ 
     if(liSelected){ 
      liSelected.removeClass('background'); 
      next = liSelected.next(); 
      if(next.length > 0){ 
       liSelected = next.addClass('background'); 

      }else{ 
       liSelected = li.eq(0).addClass('background'); 
      } 
     }else{ 
      liSelected = li.eq(0).addClass('background'); 
     } 
    }else if(e.which === 38){ 
     if(liSelected){ 
      liSelected.removeClass('background'); 
      next = liSelected.prev(); 
      if(next.length > 0){ 
       liSelected = next.addClass('background'); 

      }else{ 

       liSelected = li.last().addClass('background'); 
      } 
     }else{ 

      liSelected = li.last().addClass('background'); 
     } 
    } 
});

NEW INFO:

$('#searchProduct').keyup(function() { 

var search = $(this).val(); 

if (search != '') { 

    $.ajax({ 

     type: 'post', 
     cache: false, 
     url: '../includes/procedures/autocomplete.php', 
     data: { search: search }, 

     success: function(datos) { 

      $('#coincidenciasBusqueda').show(); 
      $('#coincidenciasBusqueda').html(datos); 
     } 
    }); 
}

});

источник

2016-07-12 Professor Zoom

просто спросите вы хотите, когда вы использовали клавиши со стрелками, просто размытие на поле ввода или вы хотите, чтобы значение Li инсталлятора, который вы выбрали? – Anami

@Anami Да, я хочу получить значение выбранного лития –

Я предоставляю функции вашего окна аргументам, чтобы поймать значение, каждый раз, когда вы нажимаете клавишу со стрелкой. и распечатать его. как показано ниже.

var li = $('#list > li'); 
 
\t \t \t var liSelected; 
 
\t \t \t $(window).on('keydown', function(e){ 
 
\t \t \t \t var selected; 
 
\t \t \t  if(e.which === 40){ 
 
\t \t \t   if(liSelected){ 
 
\t \t \t    liSelected.removeClass('background'); 
 
\t \t \t    next = liSelected.next(); 
 
\t \t \t    if(next.length > 0){ 
 
\t \t \t     liSelected = next.addClass('background'); 
 
\t \t \t     selected = next.text(); 
 

 
\t \t \t    }else{ 
 
\t \t \t     liSelected = li.eq(0).addClass('background'); 
 
\t \t \t     selected = li.eq(0).text(); 
 
\t \t \t    } 
 
\t \t \t   }else{ 
 
\t \t \t    liSelected = li.eq(0).addClass('background'); 
 
\t \t \t     selected = li.eq(0).text(); 
 
\t \t \t   } 
 
\t \t \t  }else if(e.which === 38){ 
 
\t \t \t   if(liSelected){ 
 
\t \t \t    liSelected.removeClass('background'); 
 
\t \t \t    next = liSelected.prev(); 
 
\t \t \t    if(next.length > 0){ 
 
\t \t \t     liSelected = next.addClass('background'); 
 
\t \t \t     selected = next.text(); 
 

 
\t \t \t    }else{ 
 

 
\t \t \t     liSelected = li.last().addClass('background'); 
 
\t \t \t     selected = li.last().text() 
 
\t \t \t    } 
 
\t \t \t   }else{ 
 

 
\t \t \t    liSelected = li.last().addClass('background'); 
 
\t \t \t    selected = li.last().text() 
 
\t \t \t   } 
 
\t \t \t  } 
 
\t \t \t  console.log(selected) 
 
\t \t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <title></title> 
 
\t <link rel="stylesheet" href=""> 
 
\t <style> 
 
\t \t .background{ 
 
\t \t \t background: hsla(0, 100%, 0%, 0.4); 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <input type="text" class="form-control" id="searchProduct" placeholder="Search..." /> 
 
\t <ul id="list"> 
 
    <li id="match1" class="itemList">1</li> 
 
    <li id="match2" class="itemList">2</li> 
 
    <li id="match3" class="itemList">3</li> 
 
\t </ul> 
 
</body> 
 
</html>

, если вы хотите установить на свое поле ввода, просто дать выбранное значение к ней;
или вы также можете заменить выбранные на $ ('searchProduct')
Надеюсь, это может вам помочь.

источник

2016-07-12 02:34:51 Anami

Не работает для меня, я не знаю почему, но все равно ничего –

Можете ли вы показать мне, что теперь ваш код? – Anami

You could use jquery autocomplete наряду с ajax и PHP через JSON. Теперь вы можете использовать клавиши со стрелками для выбора. Вы также можете сделать некоторые CSS, чтобы настроить внешний вид выпадающего списка.

источник

2016-07-12 02:43:15

Я думаю, что вы ищете что-то вроде:

$(function(){ 

var li = $('#list li'), n = -1, ll = li.length-1; 
$('#searchProduct').keypress(function(e){ 
    var x = e.which; 
    li.removeClass('background'); 
    if(x === 40 || x === 39 || x === 38 || x === 37){ 
    if(x === 40 || x === 39){ 
     n++; 
     if(n > ll)n = 0; 
    } 
    else if(x === 38 || x === 37){ 
     n--; 
     if(n < 0)n = ll; 
    } 
    var ci = li.get(n); 
    ci.addClass('background'); $(this).val(ci.text()); 
    } 
}); 

});

источник

2016-07-12 02:44:52 PHPglue

Это не сработало для меня :( –

Вы должны поместить код внутри своей функции успеха AJAX, которая запрашивает код, который вы генерируете. Конечно, загрузочная обертка будет работать снаружи всего. – PHPglue

Как? информация моего вопроса с кодом запроса AJAX –

Выберите элемент li со стрелками (вверх и вниз) с помощью Javascript (jQuery)

ответ

Смежные вопросы