NEW

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.
Tự thiết kế một Search Box tự động gợi ý Keyword, khung tìm kiếm cho blogspot, thiết kệ một khung tìm kiếm tự động gợi ý keyword khi bạn gõ chữ bất kỳ

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
Share:

19 nhận xét:

  1. đã đặt liên kết nha

    Trả lờiXóa
  2. đã đặt
    Title:Gia Huy NY
    Mô tả:Gia Huy NY Blog |Thủ Thuật Máy Tính, Blogger, Photoshop, Facebook, Phần Mềm, SEO Website, Hình Nền Đẹp,...
    Link : www.huyny.tk

    Trả lờiXóa
  3. Đã đặt liên kết cho bác nhé

    Trả lờiXóa
  4. hay đấy :D ông còn lưu temp google không tui xin

    Trả lờiXóa
    Trả lời
    1. có nhưng lỗi ông ơi, còn template chuẩn để trên lap nhưng giờ lap bị đứt mạch tui bán rồi :( buồn dễ sợ

      Xóa
    2. :v z gửi tui temp lỗi tui fix :D
      gửi qa mail:phu4723@gmail.com tks :*

      Xóa
    3. mail : phu4723@gmail.com

      Xóa
  5. buổi chìu vui vẻ
    tương tác tốt

    Trả lờiXóa