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

Нужно , чтоб при наборе символов в инпут , выбивало результаты поиска по 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:

<!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>