Делаю автокомплит для веб приложения и столкнулся с проблемой.
Мне не удалось найти ни одного готового примера для моей задачи. Суть в том, что в большинстве автокомплитов не работают стрелки вверх и вниз, а даже если они работают то клавиша enter помещает содерживое из выпадающего списка в INPUT, а мне нужно, чтобы совершался переход по ссылке из которых у меня и состоит выпадающий список.
Я с JS дружу очень плохо, потому и прошу вашей помощи.
Самый удачный пример который мне удалось найти привожу тут.
html
CODE (htmlphp):
скопировать код в буфер обмена
скопировать код в буфер обмена
- echo "<script src='".INCLUDES."jscripts/custom.js'></script>";
- echo "<style>
- .search_area{
- width: 350px;
- margin: 0px;
- position: relative;
- }
- #search_box{
- width:200px;
- padding:2px;
- margin:1px;
- border:1px solid #000;
- }
- #search_advice_wrapper{
- display:none;
- width: 350px;
- background-color: #eee;
- color: rgb(255, 227, 189);
- -moz-opacity: 0.95;
- opacity: 0.95;
- -ms-filter:'progid:DXImageTransform.Microsoft.Alpha'(Opacity=95);
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=95);
- filter:alpha(opacity=95);
- z-index:999;
- position: absolute;
- top: 24px; left: 0px;
- }
- #search_advice_wrapper .advice_variant{
- cursor: pointer;
- padding: 5px;
- text-align: left;
- }
- #search_advice_wrapper .advice_variant:hover{
- color:#FEFFBD;
- background-color:#818187;
- }
- #search_advice_wrapper .active{
- cursor: pointer;
- padding: 5px;
- color:#FEFFBD;
- background-color:#818187;
- }
- </style>";
- echo "<div class='search_area'>
- <form action='' method='GET'>
- <input type='text' name='id' id='search_box' value='' autocomplete='off'>
- </form>
- <div id='search_advice_wrapper'></div>
- </div>";