rg3915/Document.gif

## Document.gif

      
    Raw
  

              Document.gif
            
          
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <link rel="shortcut icon" href="http://html5-training-in-hyderabad.blogspot.com.br/favicon.ico">
  <link rel="shortcut icon" href="https://www.djangoproject.com/favicon.ico">
  <link rel="shortcut icon" href="https://alpinejs.dev/favicon.png">
  <title>Document</title>

  <!-- Alpine.js -->
  <script src="//unpkg.com/alpinejs" defer></script>

  <script src="main.js"></script>

  <link rel="stylesheet" href="main.css">
</head>

<body>
  <!-- Based on https://medium.com/@ahmednoor/in-textbox-autocomplete-using-javascript-9e1bd0611e75 -->
  <!-- https://jsfiddle.net/ahmednr123/cs5aqxLn/ -->
  <div
    id="search_container"
    x-data="autocompleteHandler()"
  >
    <div
      id="autocomplete"
      x-text="autocomplete_show"
    ></div>
    <input
      id="search_"
      type="text"
      x-model="search"
      @keyup="onKeyUp"
      @keydown="onKeyDown"
      @keydown.enter="onTabPress"
      @keydown.tab="onTabPress"
      placeholder="Search"
    />
  </div>
</body>

</html>

## main.css
body {
  /* FOR DESIGN PURPOSE */
  margin: 0;
  background: #303541;
  /* ================== */
}

#search_container {
  position: relative;
  /* IMPORTANT */
}

#search_ {
  border: 0;
  /* HAS TO BE SIMILAR TO #autocomplete */
  font-size: 14px;
  /* HAS TO BE SIMILAR TO #autocomplete */
  padding: 10px;
  /* IMPORTANT */

  /* FOR DESIGN PURPOSE */
  outline: 0;
  color: #f8fafd;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0);
  font-family: 'Inconsolata', monospace;
  /* ================== */
}

#search_::placeholder {
  color: #f8fafd;
  /* FOR DESIGN PURPOSE */
}

#autocomplete {
  position: absolute;
  /* IMPORTANT */
  z-index: -1;
  /* IMPORTANT */
  border: 0;
  /* HAS TO BE SIMILAR TO #search_ */
  font-size: 14px;
  /* HAS TO BE SIMILAR TO #search_ */
  left: 10px;
  /* ACCORDING TO THE LEFT-PADDING OF #search_ */
  top: 10px;
  /* ACCORDING TO THE TOP-PADDING OF #search_ */

  /* FOR DESIGN PURPOSE */
  background-color: rgba(0, 0, 0, 0);
  font-family: 'Inconsolata', monospace;
  color: rgba(248, 250, 253, 0.4);
  width: 100%;
  /* ================== */
}

## main.js
const autocompleteHandler = () => ({
  words: ["javascript", "alpinejs", "htmx", "python", "django"],
  search: "",
  autocomplete: "",
  autocomplete_show: "",

  onKeyUp() {
    if (this.search.length > 0) {
      let words = this.search.split(" ")
      let len = words.length
      let word = words[len - 1]

      if (word[0] !== undefined) {
        let regex = new RegExp("^" + word + ".*", "i")
        for (let i = 0; i < this.words.length; i++) {
          if (this.words[i].match(regex)) {
            this.autocomplete = this.words[i].slice(
              word.length,
              this.words[i].length
            )
            this.autocomplete_show = this.search + this.autocomplete
            break
          }
        }
      }
    }
  },

  onKeyDown(e) {
    if (this.search.length <= 1 && e.keyCode == 8) {
      this.autocomplete_show = ""
    }
  },

  onTabPress(e) {
    e.preventDefault()
    this.search += this.autocomplete
    this.autocomplete = ""
    this.autocomplete_show = ""
  },
})
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	<link rel="shortcut icon" href="http://html5-training-in-hyderabad.blogspot.com.br/favicon.ico">
	<link rel="shortcut icon" href="https://www.djangoproject.com/favicon.ico">
	<link rel="shortcut icon" href="https://alpinejs.dev/favicon.png">
	<title>Document</title>

	<!-- Alpine.js -->
	<script src="//unpkg.com/alpinejs" defer></script>

	<script src="main.js"></script>

	<link rel="stylesheet" href="main.css">
	</head>

	<body>
	<!-- Based on https://medium.com/@ahmednoor/in-textbox-autocomplete-using-javascript-9e1bd0611e75 -->
	<!-- https://jsfiddle.net/ahmednr123/cs5aqxLn/ -->
	<div
	id="search_container"
	x-data="autocompleteHandler()"
	>
	<div
	id="autocomplete"
	x-text="autocomplete_show"
	></div>
	<input
	id="search_"
	type="text"
	x-model="search"
	@keyup="onKeyUp"
	@keydown="onKeyDown"
	@keydown.enter="onTabPress"
	@keydown.tab="onTabPress"
	placeholder="Search"
	/>
	</div>
	</body>

	</html>
	body {
	/* FOR DESIGN PURPOSE */
	margin: 0;
	background: #303541;
	/* ================== */
	}

	#search_container {
	position: relative;
	/* IMPORTANT */
	}

	#search_ {
	border: 0;
	/* HAS TO BE SIMILAR TO #autocomplete */
	font-size: 14px;
	/* HAS TO BE SIMILAR TO #autocomplete */
	padding: 10px;
	/* IMPORTANT */

	/* FOR DESIGN PURPOSE */
	outline: 0;
	color: #f8fafd;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(0, 0, 0, 0);
	font-family: 'Inconsolata', monospace;
	/* ================== */
	}

	#search_::placeholder {
	color: #f8fafd;
	/* FOR DESIGN PURPOSE */
	}

	#autocomplete {
	position: absolute;
	/* IMPORTANT */
	z-index: -1;
	/* IMPORTANT */
	border: 0;
	/* HAS TO BE SIMILAR TO #search_ */
	font-size: 14px;
	/* HAS TO BE SIMILAR TO #search_ */
	left: 10px;
	/* ACCORDING TO THE LEFT-PADDING OF #search_ */
	top: 10px;
	/* ACCORDING TO THE TOP-PADDING OF #search_ */

	/* FOR DESIGN PURPOSE */
	background-color: rgba(0, 0, 0, 0);
	font-family: 'Inconsolata', monospace;
	color: rgba(248, 250, 253, 0.4);
	width: 100%;
	/* ================== */
	}
	const autocompleteHandler = () => ({
	words: ["javascript", "alpinejs", "htmx", "python", "django"],
	search: "",
	autocomplete: "",
	autocomplete_show: "",

	onKeyUp() {
	if (this.search.length > 0) {
	let words = this.search.split(" ")
	let len = words.length
	let word = words[len - 1]

	if (word[0] !== undefined) {
	let regex = new RegExp("^" + word + ".*", "i")
	for (let i = 0; i < this.words.length; i++) {
	if (this.words[i].match(regex)) {
	this.autocomplete = this.words[i].slice(
	word.length,
	this.words[i].length
	)
	this.autocomplete_show = this.search + this.autocomplete
	break
	}
	}
	}
	}
	},

	onKeyDown(e) {
	if (this.search.length <= 1 && e.keyCode == 8) {
	this.autocomplete_show = ""
	}
	},

	onTabPress(e) {
	e.preventDefault()
	this.search += this.autocomplete
	this.autocomplete = ""
	this.autocomplete_show = ""
	},
	})