JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<label for="searchString">
                            Geben Sie einen Namen ein
                        </label> 
                        <input type="hidden" value="search_user" name="action"> 
                        <input type="text" autocomplete="off" title="Search Profile" size="22" value="" class="lotusText ui-autocomplete-input" name="searchString" id="nameSearchText" >

JavaScript

var renderItemOverride = function(ul, item) {
                //var item = entry.value;
                //var copy = $("#copySelector_${ns}").clone()
                //.attr("id", item.id)
                //.removeClass("copySelector")
                //.addClass("profileData_${ns}");               
                //copy.find(".profilePhoto").attr("title", item.name).attr("alt", item.name).attr("src", item.imageURL);
                //copy.find("h2.profileName").text(item.name);
                //return $(copy).data( "item.autocomplete", entry ).appendTo( ul );
            //return $('<li class="result"></li>').data("item.autocomplete", item).append('<a><span class="name">' + item.label + '</span><span class="type"></span></a>').appendTo(ul);
        
     //return $('<li class="result"></li>').data("item.autocomplete", item).append($('<a></a>').text(item.label )).appendTo(ul);
     
            return $('<li class=" vcard lotusVCard"></li>').data("item.autocomplete", item)
                .append( $('<div class="lotusPhoto photo"></div>').append('<img height="30" width="30" title="'+item.value.name+'" alt="'+item.value.name+'" src="${basePath}/images/photo.gif" class="profilePhoto" />') )
              .append($('<a></a>').text(item.label))
             .appendTo(ul);
        };

     
        $("#nameSearchText").autocomplete({ 
                source: [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"]
            ,
                delay: 300,
                minLength: 2,
                focus: function( event, ui ) {
                        $("#nameSearchText").val( ui.item.label );
                        alert(...