Tự thiết kế một Search Box tự động gợi ý Keyword

Search Box (hộp tìm kiếm) là một phối hợp của input fied và submit button. Một số người nghĩ search box chẳng cần được thiết kế, sau tất cả, nó chỉ là hai phần tử đơn giản. Tuy nhiên, trong các website có nhiều nội dung, Search Box là phần tử được thường xuyên được thiết kế để sử dụng nhất. Khi người dùng gặp phải một trang web tương đối phức tạp. Họ sẽ ngay lập tức phải tìm đến một Search Box để tìm được đích đến của kết quả mà họ mong muốn một cách dễ dàng và không phức tạp. Thiết kế một Search Box và khả năng sử dụng của nó đã trở thành một vấn đề lớn.

Cách thực hiện

Bước 1:

Dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 76%;
}

input[type=submit] {
background-color: DodgerBlue; color: #fff; cursor: pointer; float: right; margin-top: -40px;
}

.autocomplete-items {
position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

Bước 2:

Dán đoạn code bên dưới vào trước thẻ </body>

<script>
function autocomplete(inp,arr){function addActive(x){return x?(removeActive(x),currentFocus>=x.length&&(currentFocus=0),0>currentFocus&&(currentFocus=x.length-1),void x[currentFocus].classList.add("autocomplete-active")):!1}function removeActive(x){for(var i=0;i<x.length;i++)x[i].classList.remove("autocomplete-active")}function closeAllLists(elmnt){for(var x=document.getElementsByClassName("autocomplete-items"),i=0;i<x.length;i++)elmnt!=x[i]&&elmnt!=inp&&x[i].parentNode.removeChild(x[i])}var currentFocus;inp.addEventListener("input",function(e){var a,b,i,val=this.value;if(closeAllLists(),!val)return!1;for(currentFocus=-1,a=document.createElement("DIV"),a.setAttribute("id",this.id+"autocomplete-list"),a.setAttribute("class","autocomplete-items"),this.parentNode.appendChild(a),i=0;i<arr.length;i++)arr[i].substr(0,val.length).toUpperCase()==val.toUpperCase()&&(b=document.createElement("DIV"),b.innerHTML="<strong>"+arr[i].substr(0,val.length)+"</strong>",b.innerHTML+=arr[i].substr(val.length),b.innerHTML+="<input type='hidden' value='"+arr[i]+"'>",b.addEventListener("click",function(e){inp.value=this.getElementsByTagName("input")[0].value,closeAllLists()}),a.appendChild(b))}),inp.addEventListener("keydown",function(e){var x=document.getElementById(this.id+"autocomplete-list");x&&(x=x.getElementsByTagName("div")),40==e.keyCode?(currentFocus++,addActive(x)):38==e.keyCode?(currentFocus--,addActive(x)):13==e.keyCode&&(e.preventDefault(),currentFocus>-1&&x&&x[currentFocus].click())}),document.addEventListener("click",function(e){closeAllLists(e.target)})}var countries=["TUT ĐAME 5S","PSD","facebook","thủ thuật blog","cmnd","cosplay","template","template chuẩn seo","ảnh bìa facebook","share template","hướng dẫn","code","Share source code tặng cho người yêu","thủ thuật facebook",""];autocomplete(document.getElementById("myInput"),countries);
</script>

Vì đoạn này mình nén nên nhìn sẽ rối

Bước 3:

Chèn đoạn HTML bên dưới vào nơi bạn muốn Search Box hiển thị

<form  action='/search' id='cse-search-box' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' autocomplete="on">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" itemprop="query-input" name="q" placeholder="Search Here" required="required" type="text" />
    <input id='edit-submit--4' name='op' type='submit' value='Search'/>
</div>
</form>

Chỉnh sửa keyword

Các bạn Ctrl + F tìm đoạn var countries= của bước 2, bên trong dấu ngoặc sẽ là Keyword khi bạn search

Copy vui lòng leech về methuthuat.tk

Bài đăng Mới hơn Bài đăng Cũ hơn