search

In this example below you will see how to do a search with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©
  • HTML
  • CSS
  • JavaScript
    <body @keyup.esc="closeForm()">
  <div class="container">
      <div class="search-bar" :class="{ 'open': test1 }">
         <div class="search-bar-form">
           <input type="search" class="search-bar-input" @click="getOpen()" placeholder="Search..." @keyup.esc="closeForm()" @keyup.enter="getAsk()" v-model="newAsk">
           <button class="search-bar-submit" type="submit" @click="getAsk()">Search</button>
         </div>


       <div class="result-wrap" v-show="askChecked">
         <div class="result" v-for="elem in askRes" transition="expand">
           <h2><a href="http://en.wikipedia.org/?curid={{elem.pageid}}" target="_blank">{{ elem.title }}</a></h2>
           <p>{{ elem.extract }}</p>
         </div>
       </div>

       <span class="search-bar-close" v-on:click="closeForm()"></span>
       </div>
        <div class="overlay"></div>
       <!-- <search-bar></search-bar> -->
    </div>
</body>

/*Downloaded from https://www.codeseek.co/DM_Daria/search-bgMrBX */
    //https://tympanus.net/codrops/2014/11/04/simple-morphing-search/
@import "compass/css3";

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import 'https://fonts.googleapis.com/css?family=Poiret+One';


*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }


html, body {
  height: 100%;
}
body {
  font-family: 'Poiret One', 'Roboto', 'Helvetica';
  overflow-x: hidden;
  overflow-y: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;

  background: rgba(203,96,179,1);
  @include background-image(
    linear-gradient(125deg, rgba(206, 190, 41, .3) 0%, rgba(155, 31, 80, .3) 33%, rgba(41, 137, 216, .3) 71%, rgba(155, 31, 80, .3) 95%),
    linear-gradient(-88deg, rgba(206, 190, 41, .8) 0%, rgba(155, 31, 80, .3) 33%, rgba(41, 137, 216, .7) 71%, rgba(155, 31, 80, .7) 95%),
    linear-gradient(23deg, rgba(206, 190, 41, 1) 0%, rgba(155, 31, 80, .6) 33%, rgba(41, 137, 216, 1) 71%, rgba(155, 31, 80, 1) 95%)
  );
}

.result-wrap {
  color: #333;
  margin-top: 4.5em;
  height: 0;
  overflow: hidden;
  padding: 0 10.5%;
  background: #f1f1f1;
  position: relative;
  pointer-events: none;
  opacity: 0;
}



input[type="search"] { /* reset normalize */
	box-sizing: border-box;
}

.result {
    background: #eee;
    padding: .7em;
    margin-top: 1em;
}

a {
  color: #000;
  text-transform: capitalize;
  text-decoration: none;

  &:hover {
    text-decoration: line-through;
  }
}


//
.search-bar-form {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  position: relative;
  transition-property: width, height, transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.search-bar-submit {

  position: absolute;
  width: 80px;
  height: 80px;
  text-indent: 100px;
  overflow: hidden;
  right: 0;
  top: 50%;
  background: transparent url(../img/magnifier.svg) no repeat center center;
  background-size: 100%;
  border: none;
  pointer-events: none;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: translate3d(-30px,-50%,0) scale3d(0,0,1);

  &:focus {
    outline: none;
  }
}

.search-bar {
  float: right;
  width: 200px;
  min-height: 40px;
  background: #f1f1f1;
  position: absolute;
  z-index: 10000;
  top: 50px;
  right: 50px;
  transform-origin: 100% 0;
  transition-property: min-height, width, top, right;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);

  &.open {
    width: 100%;
    min-height: 100%;
    top: 0px;
    right: 0px;

    .search-bar-form {
      width: 80%;
      height: 160px;
      transform: translate3d(0,3em,0);
    }

    .search-bar-input {
      font-size: 7em;
    }

    ~ .overlay {
      opacity: 1;
    }

    .result-wrap {
      opacity: 1;
      height: auto;
      overflow: visible;
      pointer-events: auto;
      transition: opacity 0.3s 0.5s;

      &:first-child {
        transition-timing-function: ease-in-out;
        transition-delay: .5s;
      }

      &:nth-child(2) {
        transition-timing-function: ease-in-out;
        transition-delay: 1s;
      }

      &:nth-child(3) {
        transition-timing-function: ease-in-out;
        transition-delay: 2s;
      }

    }

    .search-bar-submit {
      pointer-events: auto;
      opacity: 1;
      transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
      transition: opacity 0.3s, transform 0.3s;
      transition-delay: 0.5s;

      &:hover {
        background-color: #555;
      }
    }

    .search-bar-close {
      opacity: 1;
      pointer-events: auto;
      transform: scale3d(1,1,1);
      transition: opacity 0.3s, transform 0.3s;
      transition-delay: 0.5s;
    }

    .expand-transition {
      transition: all 1s ease;
      overflow: hidden;
    }

    /* .expand-enter defines the starting state for entering */
    /* .expand-leave defines the ending state for leaving */
    .expand-enter, .expand-leave {
      height: 0;
      padding: 0 10px;
      opacity: 0;
    }
  }
}

.search-bar-close {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 1em;
  top: 1em;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: scale3d(0,0,1);

  &::before, &::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 3px;
    opacity: 0.2;
    background: #000;
  }

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }

  &:hover {
    &::before, &::after {
      opacity: 1;
    }
  }
}

.search-bar-input {
  width: 100%;
  height: 100%;
  padding: 0 10% 0 10px;
  font-weight: 700;
  border: none;
  background: transparent;
  font-size: 0.8em;
  color: #ec5a62;
  transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);

  &::placeholder {
    color: #c2c2c2;
  }

  &::clear {
    display: none;
  }

  &:focus {
    outline: none;
  }
}


@media screen and (max-width: 53.125em) {
  .search-bar-input {
    padding: 0 25% 0 10px;
  }
  .search-bar {
    &.open {
      .search-bar-input {
        font-size: 2em;
      }

      .search-bar-submit {
        transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
      }
    }
  }
}

@media screen and (max-width: 60.525em) {
  .search-bar {
    width: 80%;
    top: 10%;
    right: 10%;
  }
}



/*Downloaded from https://www.codeseek.co/DM_Daria/search-bgMrBX */
    const vm = new Vue({
      el: 'body',
      data: {
        test1: '',
        askRes: null,
        newAsk: '',
        newUrl: '',
        ask: null,
        askChecked: false
      },
      ready: function () {
          // this.getLink()
      },
      methods: {
        getOpen: function () {
          this.test1 = 'open'
        },
        closeForm: function () {
          this.test1 = ''
          this.newAsk = ''
          this.askRes = ''
          this.askChecked = false
        },
        getUrl: function () {
          var apiUrl = "https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrnamespace=0&exsentences=1&exintro&explaintext&exlimit=max&prop=extracts&gsrlimit=10&gsrsearch="+this.newAsk+"&format=json"
          this.$set('newUrl', apiUrl)
        },
        getAsk: function () {
          this.getUrl()
          this.$http.jsonp(this.newUrl).then((response) => {
            this.askRes = response.data.query.pages
            this.askChecked = true
          }, (response) => {
            // if api not working
            console.log(response.data)
          })
        },
      }
    })

Comments