JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

Names: Al Pal Bobby Jamy Tricia Chrissy<br><br>
    Name:<input id="autocomp" size="12"><br>
    Points: <input id="points" size="5">
    <button class="ctrlbutton" id="choosename">Choose</button><br>
    status<br> <textarea id="status" rows="12" cols="30"></textarea>

CSS

/*!
 * jQuery UI CSS Framework 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*!
 * jQuery UI CSS Framework 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

$("#autocomp").blur(function() { $("#status").append("autocomp blur\n") 
         
        /*             
        $("#autocomp").autocomplete({
          search: function(event, ui) {
            alert(ui.item.pts);
          }
        }); */
             });
                                              

        $("#autocomp").keypress(function(event) {
          var keycode = (event.keyCode ? event.keyCode : event.which);
          if(keycode == '13') {
            $("#status").append("Enter pressed\n"); 
            $("#points").focus();
          }
        });

        var names = [
          {value: "Al", pts: "20"},
          {value: "Pal", pts: "30"},
          {value: "Jamy", pts: "40"},
          {value: "Bobby", pts: "50"}, 
          {value: "Tricia", pts: "60"},
          {value: "Chrissy", pts: "70"}
        ];

        $("#autocomp").autocomplete({
          source: names,
          select: fillPts
        });

        function fillPts(event, ui) {
          $("#points").val(ui.item.pts);
        }