dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Search by tags

  1. #1
    Join Date
    Jun 2017
    Posts
    7

    Search by tags

    Hello!

    I want to make many webpages and give to each of them, multiple tags.
    And i want to make a search page with a textbox.
    When i enter a tag in textbox and press button search to show me below all links to my pages that have that tag.
    Then if i want i can enter a new tag. Now after search button to show me below all links to my pages that have both tags.
    I think max 10 tags search is enough. But if i want to eliminate one tag to be able to so, i don't want to start over again.

    Can you help me please?
    Thank you!

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,251
    This is more of a Database / PHP type question with a possibility of some AJAX.

    You haven't shown any code of what you have done so far to resolve this problem... When posting code, please use the Forum BBCode tags to wrap around your code blocks. (Hint: see my signatures)
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2017
    Posts
    7
    Blogger.com have something similar of what i want.
    In the link page: http://myblog.blogspot.ro/search/label/tag1+tag2+tag3
    I want something like this to implement in my offline website.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,251
    The question is simply, what have you done so far? Where is your code? Unless you can provide code for people to work with, you will find answers not forthcoming.

    When posting any code, please use the forum BBCode tags to wrap your code with in the post.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jun 2017
    Posts
    7
    I found this example https://www.w3schools.com/angular/tr..._filters_input
    But there are some drawbacks that i don't want:
    1) in list i can't enter links
    2) the tag name must be in name of the item of the list
    3) i can only search for multiple tags if they are written in the same order as the item of the list

    In this example https://www.w3schools.com/howto/tryi...js_filter_list
    only problem 1) is solved. Here i can insert links.

    Can you help me pls?

  6. #6
    Join Date
    Jun 2017
    Posts
    7
    I am almost done.
    In this example i have 2 questions:
    1) why if i add another site in list is no longer working?
    Code:
      	{
        	"name": "Site 4",
          "tags": ["2", "4"]
        }
    2) were i insert Sites links?

    Code:
    <!DOCTYPE html>
    <html>
    
    
    <body>
    <script>
    var data = 
    [
      	{
        	"name": "Site 1",
          "tags": ["1", "2", "3"]
        },
      	{
        	"name": "Site 2",
          "tags": ["2", "3"]
        },
      	{
        	"name": "Site 3",
          "tags": ["1", "3"]
        }
    
    ]
    
    window.search = function() {
    
    	var toSearch = document.getElementById("myInput").value.toUpperCase();
      var filterFunction = function(element) {
      	return false;
      }
      if (toSearch.length) {
      	var tagsProvided = toSearch.split(/[ ,\t]/);
        filterFunction = function(element) {
        	var keep = true;
          for (var i = 0; i < tagsProvided.length; ++i) {
             var tagProvided = tagsProvided[i];
             if (tagProvided.length < 1) continue;
             
             var currentTagFound = false;
             for (var j = 0; j < element.tags.length; ++j) {
             	 currentTagFound |= (tagProvided.toUpperCase() == element.tags[j].toUpperCase());
             }
             keep &= currentTagFound;
          }
          return ! keep;
        }
      }
      
      ul = document.getElementById("myUL");
      
      while (ul.lastChild) {
        ul.removeChild(ul.lastChild);
      }
      
      for (var i = 0; i < data.length; ++i) {
        var element = data[i];
      	if (filterFunction(element)) continue;
        
        var li = document.createElement("li");
        
        var a = document.createElement("a");
        a.appendChild(document.createTextNode(element.name + " (" + element.tags.join(", ") + ")"));
        a.setAttribute("href", "#");
        
        li.appendChild(a);
        ul.appendChild(li);
      }  
    }
    
    search();
    </script>
    <h2>My WebSites</h2>
    
    <input type="text" id="myInput" onkeyup="search()" placeholder="Search for tags.." title="Type in a tag">
    
    <ul id="myUL">
    </ul>
    
    </body>
    </html>

  7. #7
    Join Date
    Jun 2017
    Posts
    7
    Last question. Is there a way to hide tags from displaing in page?

    Thank you!

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,251
    Using CSS you can hide any element.

    IDK why you are going to all those lengths if you only need to access the links, you would use the document.links object for that purpose.
    Code:
    var lnk = document.links;
    for(l=0; l<lnk.length; l++){
        if( lnk[l].name == "mylink" ){
             // do something here.
        }
    }
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  9. #9
    Join Date
    Jun 2017
    Posts
    7
    I have only one thing to do.
    I would like to introduce myself a custom link for each option(site). Ex. Site 1 to have "link1", Site 2 to have "link2" etc. The link is different from the name of the page.

    https://jsfiddle.net/y1bdg0uL/

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,251
    Ummmm, the link different from that in the page.... Not a good idea or one that is going to inspire confidence in your visitors if they are expecting to go to page X and you send them to page Z.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  11. #11
    Join Date
    Jun 2017
    Posts
    7
    Thank you all!
    My finish result is: http://jsfiddle.net/y1bdg0uL/1/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles