Почему не работает вставка результатов поиска в инпут? [Архив форума]

Просмотр полной версии : Почему не работает вставка результатов поиска в инпут?

Валерий1996

01.09.2015, 10:24

Нужно , чтоб при наборе символов в инпут , выбивало результаты поиска по json массиву, в этот самый инпут. Для этого я использовал библиотеку "ui.autocomplete". Но что, то не работает , не могу понять причину. Кто уже работал с этой библиотекой подскажите, что не так.

Ниже представляю свой скрипт для илюстрации проблемы:

<input type="text" id="myinput">

$(function() {
$(function() {

var projects = [ {
"data": {
"allfilms": {
"rosdestvenskaya istoriya": {},
"sreck": {},
"lednikoviy period": {},
"simsoni": {},
"sauth parck": {},
"rapuncel": {}
}
}
}
]

$( "#myinput" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#myinput" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#myinput" ).val( ui.item.label );
$( "#myinput-id" ).val( ui.item.value );
$( "#myinput-description" ).html( ui.item.desc );
$( "#myinput-icon" ).fadeOut('slow',function(){
$(this).attr( "src", "images/" + ui.item.icon ).fadeIn('slow');
});

return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};

Вот версия с подключенной библиотекой : jsfiddle.net/t52ka/35

:help: :help: :help:

EmperioAf

01.09.2015, 18:11

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ГГ</title>

<style>

input {
display: block;
width: 150px;
height: 20px;
}

textarea {
display: block;
outline: none;
border: none;
}
</style>
</head>
<body>

<input type="text">
<textarea cols="30" rows="10"></textarea>
<script>
var projects = [ {
"data": {
"allfilms": {
"rosdestvenskaya istoriya": {},
"sreck": {},
"lednikoviy period": {},
"simsoni": {},
"sauth parck": {},
"rapuncel": {}
}
}
}];

var str = Object.keys(projects[0]['data']['allfilms']).toString()
mas = str.split(','),
textarea = document.querySelector('textarea'),
input = document.querySelector('input');
input.addEventListener('keyup', function(){
textarea.value = '';
var i;
if (input.value !== '')
for (i = 0; i < mas.length; i++){
if (mas[i].indexOf(input.value) !== -1){
textarea.value += mas[i] +"\r\n";
}
}
}, false);

</script>
</body>
</html>

Валерий1996

02.09.2015, 17:12

Спасибо большое