working with Tags (Keywords)

[kuldevbhasin]

hi
i am working on a website wherein the user can save tags (Keywords) multiple tags separated by comma, against a product which can later be used for search. the user can have a max. of 50 tags per products. (This is similar to the tags we have here below the post)

i have searched a lot and found many eg. which are working in html but when i try to implement it in ASP it is not working.

i also would appreciate someone guide me as to how is the best to save it.
i am planning to save the comma separated tags in a single filed, i am also puzzled as to how i will display them back.

should i save it in as a single record or save each tags as a separate records

pls. help me out.
thanks in advance.

[jmcilhinney]

when i try to implement it in ASP it is not working.

If it didn't work then you did it wrong. If we can't see what you did, we can't see what's wrong with it. Don't ask us to explain an entire process when you may already know 99% of it. Show us what you did, explain what you expect it to do and explain what actually happens when you use it.

should i save it in as a single record or save each tags as a separate records

How to best store them depends on how you intend to use them. If you want to find records associated with an individual tag then a single, comma-separated value would be a bad idea because you couldn't use an index to accelerate database searches.

[kuldevbhasin]

sorry my bad. i should have put what i am working with.
i got it working. posting it here just in case it may help someone.

HTML

   <asp:TextBox ID="txttags" runat="server" class="form-control" data-role="tagsinput"
       Font-Size="Large"></asp:TextBox>

CSS

.bootstrap-tagsinput {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: double;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

JS

const ul = document.querySelector("ul"),
input = document.querySelector("input"),
tagNumb = document.querySelector(".details span");

let maxTags = 10,
tags = ["coding", "nepal"];

countTags();
createTag();

function countTags(){
    input.focus();
    tagNumb.innerText = maxTags - tags.length;
}

function createTag(){
    ul.querySelectorAll("li").forEach(li => li.remove());
    tags.slice().reverse().forEach(tag =>{
        let liTag = `<li>${tag} <i class="uit uit-multiply" onclick="remove(this, '${tag}')"></i></li>`;
        ul.insertAdjacentHTML("afterbegin", liTag);
    });
    countTags();
}

function remove(element, tag){
    let index  = tags.indexOf(tag);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    element.parentElement.remove();
    countTags();
}

function addTag(e){
    if(e.key == "Enter"){
        let tag = e.target.value.replace(/\s+/g, ' ');
        if(tag.length > 1 && !tags.includes(tag)){
            if(tags.length < 10){
                tag.split(',').forEach(tag => {
                    tags.push(tag);
                    createTag();
                });
            }
        }
        e.target.value = "";
    }
}

input.addEventListener("keyup", addTag);

const removeBtn = document.querySelector(".details button");
removeBtn.addEventListener("click", () =>{
    tags.length = 0;
    ul.querySelectorAll("li").forEach(li => li.remove());
    countTags();
});

thanks @jmcilhinney

[kuldevbhasin]

hi.
i am still struggling with this. can anyone pls. help me out. pls.

[TysonLPrice]

hi.
i am still struggling with this. can anyone pls. help me out. pls.

I don't have the expertise to help but in post #3 you said it is working and it is an example of that and then in post #4 you are struggling. Maybe you should say with what.