vue.js is there a way to create a text input box with a dropdown menu for the us
ID: 3752671 • Letter: V
Question
vue.js
is there a way to create a text input box with a dropdown menu for the user to select from, that allows the user to edit the text box after they select an option? For example, if my drop down menu has option ['Cartoon Network', 'Nick', 'Disney'] and the user selects 'Cartoon Network', I want the user to be able to change it to 'Cartoon Network - Adult Swim' if they wanted to. And i would want 'Cartoon Network - Adult Swim' to be pushed into the options for next time. Can someone please show me the code that would do this, I am new to Vue and JS I think i can use taggable and push-tags but im not sure how.
Explanation / Answer
Input box in HTMl doesn't support dropdown along with it. There are number of ways to accomplish the same. Some of them are
1. Use Bootstrap
2. Use HTML <UL> and <LI>
3. Use JQUery plugin
In this answer, I'm using second method. I'm using an additional button to add vales back to dropdown and to demonstrate the code. This can be avoided if you want to add items back on textbox blur or any other event. It depends on your requirement.
Below is the sample running code.
Markup:
<html>
<head>Vue.js - textbox with dropdown</head>
<!-- Use Id as app. This ID you will connect js file -->
<div id="app">
<!-- Add an input box which holds the selected value and triggers dropdown-->
<!-- add v-model attribute and assign a variable to that. This will act as two way binding and updates the text box on selecting any value from dropdown-->
<input v-model="selectedItem" @click="show()" type="text" placeolder="Please click on text box to toggle dropdown" />
<!-- Add a text box which serves the purpose to push if user enters any new text-->
<input type="button" @click="addValuesToDropDown()" value="Add"/>
<!-- Add ul and li which act as a dropdown-->
<!-- add v-if condition to toggle dropdown on click of textbox -->
<ul v-if="visible">
<!-- Loop through the items to display dropdown values using v-for-->
<!-- Add an click event which will update the textbox value -->
<li v-for="item in items" @click="selectOption(item)">
{{ item.val }}
</li>
</ul>
</div>
CSS:
/*By Default UL tags will have some margin and padding assigned by browser. Removing them along with the bullet using list-style: none so that it appears exactly under textbox and looks like dropdown*/
/*You can style the UL and LI to add looks like dropdown*/
ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 160px;
}
JavaScript:
new Vue({
//Initialize the app by binding it to topmost
el: "#app",
data: {
//Declare below variables
//visible -- to toggle dropdown
visible: false,
//selectedItem -- to hold the value of current selected item and for two way binding to add values back to dropdown
selectedItem: '',
//items -- To hold array of items you need to display in dropdown
items: [
{id: 1, val: 'Cartoon Network'},
{id: 2, val: 'Nick'},
{id: 3, val: 'Disney'},
]
},
//Define below functions
methods: {
//show -- to be called from input click. It will toggle the dropdown
show: function() {
//Assigning not of same value. This will assign this.visible = true if it is false and vice versa
//If you want to access any item within the object, we use 'this' in Vue.js
this.visible = !this.visible;
},
//hide -- function to hide dropdown. This will be called from click handle of dropdown
hide: function() {
this.visible = false;
},
//findItem -- This function is used to if the item we are trying to add to dropdown already exists. Useful to avoid insertion of duplicate value
findItem: function (value) {
//Loop through all the values and find if the current entered value exists in the collection
for (var item in this.items) {
//Since items is collection of objects, we got to check the 'val' field for value
if (this.items[item]["val"] === value) {
//Return true if exists
return true;
}
}
//Return false if not exists
return false;
},
//updateDropdown -- This function add the value to 'items' which will be displayed as value in dropdown
updateDropdown: function(value) {
//push -- this is the inbuilt method on 'Array' type in JavaScript.
//This will add new item to array
this.items.push({
//Using id in collection to find a unique value if required in future.
//With current code, it doesn't have any use
id: this.items.length,
val: value
});
},
//addValuesToDropDown -- This is the event handler to be called on click of Add button
addValuesToDropDown: function(){
//Check if value already exists in the collection
if (!this.findItem(this.selectedItem)) {
//If not, then only add a new one
this.updateDropdown(this.selectedItem);
}
},
//selectOption -- Event Handler to be called from click action of li tag
selectOption : function(item){
//Assign selected item to variable, to be displayed in textbox
this.selectedItem = item.val;
//hide the dropdown
this.hide();
}
}
});
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.