Using Trim method how to remove space/enter in vuejs?

Question

 processSearch() {
        this.search.trim().length>0;
        // this.searchHistory.push(this.search);
        this.search = ''; 
      },

preventLeadingSpace(e) {
        // only prevent the keypress if the value is blank
        if (!e.target.value) e.preventDefault();
        // otherwise, if the leading character is a space, remove all leading white-space
        else if (e.target.value[0]==' ') e.target.value = e.target.value.replace(/^\s*/, "");
      },

 <input
          
          id="SearchText"
          type="text"
          v-model="search"
          @keydown.enter="enter"
          @click="onClick"
          @keyup.enter="processSearch"
          @input="change"
          @keyup="inputChanged"
          @keydown.down="onArrow"
          @keydown.up="onArrow"
          @keydown.space="preventLeadingSpace"
         
        />


<ul class="list-inline" >
    
      <li
        class="list-inline-item list-group-item-primary"
        v-for="(item, index) in searchHistory
          .slice(-5)
          .reverse()
          .map((s) => s.trim())"
        :key="index"
        @click="selectPreviousSearch(index)"
      >
        {{ item }}
      </li>

    </ul>

this.search.trim().length>0

// tried using this to stop enter, But doesn't work.

I am trying to do the search functionality ,If user enter anything in the search, result will be displayed in li. Now the issue is, even without entering any data simply if i click on enter key from the keyboard, then also it is showing as result in li.

Second issue is, If is click on input, dropdown is displaying. But when i click outside of input dropdown is not closing.

Answer 1

To remove the white spaces, or to trim the input, Vue come up with such functionality. You can use v-model.trim try this:

<form @submit.prevent="processSearch">
<input
          id="SearchText"
          type="text"
          v-model.trim="search"
          @keydown.enter="enter"
          @click="onClick"
          @input="change"
          @keyup="inputChanged"
          @keydown.down="onArrow"
          @keydown.up="onArrow"
          @keydown.space="preventLeadingSpace"
         
        />
</form>

Then your processSearch function:

processSearch() {
       if(this.search){
            this.searchHistory.push(this.search); this.search = '';
         } 
 } 

Answer 2

Let me help you on how to avoid duplicates on your <li> items

.... 
data(){
    return{
    items: [], 
    search: "" 
} 
}, methods:{
processSearch() {
       if(this.search){
            this.searchHistory.push(this.search); this.search = '';
           if(this.items.indexOf(this.search) === -1){
        this.items.push(this.search)
        } 
         } 
 } 
}
.... 

Now on your lists

<ul class="list-inline"  >
    
      <li
        class="list-inline-item list-group-item-primary"
        v-for="(item, index) in items
          .slice(-5)
          .reverse()
          .map((s) => s.trim())"
        :key="index"
       ..... 
      >
        {{ item }}
      </li>

    </ul>