Why does inserting search results into input not work?

Question

JavaScript

It is necessary that when typing characters into the input, knock out the search results for the json array, into this very input. For this I used the "ui.autocomplete" library. But something does not work, I can not understand the reason. Who has already worked with this library, tell me what's wrong.

Below is my script to illustrate the problem:

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


$(function() {
        var projects = [
            {
            value: "shrek",
                label: "шрек, шрек",
                desc: "мультфильм шрек 2",
                icon: "shrek.jpg"
            },
            {
                value: "рождественская история",
                label: "мультфильм рождественская история",
                desc: "мультфильм рождественская история",
                icon: "cristmas.jpg"
            },
            {
                value: "ледниковый период",
                label: "мультфильм ледниковый период",
                desc: "мультфильм ледниковый период",
                icon: "lp.jpg"
            }
            ,
            {
                value: "simpsoni",
                label: "симпсоны",
                desc: "описание, описание, описание...",
                icon: "simpsoni.jpg"
            }
        ];
});


$( "#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 );
        };

Here is the version with the included library: jsfiddle.net/t52ka/35

Answer 1

Instead of the plugin content, put this content: code.jquery.com/ui/1.11.4/jquery-ui.js
That is, you should also mark that initialization code inside the jquery function. In short, here: jsfiddle.net/t52ka/36