MohitDabas/naso.html

## naso.html

<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>HTML 5 Based Command Console with multiple autocomplete </title>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

      <style>
        flex:1;
flex-directin:column;
align-items:center;
justify-content:space-between;
padding:10px;
width:200px;
color:#000;
margin-bottom:10px;

align-items:center;
color:#000;
flex-directin:column;
flex:1;
justify-content:space-between;
margin-bottom:10px;
padding:10px;
width:200px;
outline: 0px solid transparent;

      </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];

        function split( val ) {
          return val.split( /\s\s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }

        $( "#tags" )
          // don't navigate away from the field on tab when selecting an item
          .on( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 0,
            source: function( request, response ) {
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( " " );
              return false;
            }
          });
      } );
      </script>
    </head>
    <body>

    <div class="ui-widget">
      <label for="tags">$ </label>
      <input id="tags" size="50" style="border: 0;outline:none!important;">
    </div>


    </body>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML 5 Based Command Console with multiple autocomplete </title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

	<style>
	flex:1;
	flex-directin:column;
	align-items:center;
	justify-content:space-between;
	padding:10px;
	width:200px;
	color:#000;
	margin-bottom:10px;

	align-items:center;
	color:#000;
	flex-directin:column;
	flex:1;
	justify-content:space-between;
	margin-bottom:10px;
	padding:10px;
	width:200px;
	outline: 0px solid transparent;

	</style>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
	$( function() {
	var availableTags = [
	"ActionScript",
	"AppleScript",
	"Asp",
	"BASIC",
	"C",
	"C++",
	"Clojure",
	"COBOL",
	"ColdFusion",
	"Erlang",
	"Fortran",
	"Groovy",
	"Haskell",
	"Java",
	"JavaScript",
	"Lisp",
	"Perl",
	"PHP",
	"Python",
	"Ruby",
	"Scala",
	"Scheme"
	];

	function split( val ) {
	return val.split( /\s\s*/ );
	}
	function extractLast( term ) {
	return split( term ).pop();
	}

	$( "#tags" )
	// don't navigate away from the field on tab when selecting an item
	.on( "keydown", function( event ) {
	if ( event.keyCode === $.ui.keyCode.TAB &&
	$( this ).autocomplete( "instance" ).menu.active ) {
	event.preventDefault();
	}
	})
	.autocomplete({
	minLength: 0,
	source: function( request, response ) {
	// delegate back to autocomplete, but extract the last term
	response( $.ui.autocomplete.filter(
	availableTags, extractLast( request.term ) ) );
	},
	focus: function() {
	// prevent value inserted on focus
	return false;
	},
	select: function( event, ui ) {
	var terms = split( this.value );
	// remove the current input
	terms.pop();
	// add the selected item
	terms.push( ui.item.value );
	// add placeholder to get the comma-and-space at the end
	terms.push( "" );
	this.value = terms.join( " " );
	return false;
	}
	});
	} );
	</script>
	</head>
	<body>

	<div class="ui-widget">
	<label for="tags">$ </label>
	<input id="tags" size="50" style="border: 0;outline:none!important;">
	</div>


	</body>