Twitter API Question posted in
The official Twitter API documentation can be found here.

how to search a user in a bootstrap table of users? – Twitter API

I’m developing an application for users management with spring mvc. I’m using this bootstrap table in my jsppage which make me do a research on the data in the table .

In my table the data of users is retreived from database . this is the code : 

<div class="col-md-9">
    <form action="#" method="get">
        <div class="input-group">
            <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
            <input class="form-control" id="system-search" name="q"
                placeholder="Search for" required> <span
                class="input-group-btn">
                <button type="submit" class="btn btn-default">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </span>
        </div>
    </form>
    <table class="table table-list-search">
        <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Surname</th>
                <th>email</th>
                <th>contact</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <c:forEach items="${listUsers}" var="user">
            <tbody>
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.surname}</td>
                    <td>${user.email}</td>
                    <td>${user.contact}</td>
                    <td>
                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                            <button class="btn btn-primary btn-xs" data-title="Edit"
                                    data-toggle="modal"
                                    onclick="location.href='<c:url value="/modifier/${user.id}" />'">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </button>
                        </p>
                    </td>
                    <td>
                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                            <button class="btn btn-danger btn-xs" data-title="delete"
                                    data-delete='${user.id}' data-toggle="modal"
                                    data-target="#confirm-delete" data-href="/supprimer/${user.id}">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </p>
                    </td>
                </tr>
            </tbody>
        </c:forEach>
    </table>
</div>

and this is the script which do the research on the table :

$(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');

    //something is entered in search form
    $('#system-search')
        .keyup(function() {
            var that = this;

            // affect all table rows on in systems table
            var tableBody = $('.table-list-search tbody');
            var tableRowsClass = $('.table-list-search tbody tr');
            $('.search-sf').remove();

            tableRowsClass
                .each(function(i, val) {
                    //Lower text for case insensitive
                    var rowText = $(val).text().toLowerCase();
                    var inputText = $(that).val().toLowerCase();
                    if (inputText != '') {
                        $('.search-query-sf').remove();
                        tableBody
                            .prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
                                + $(that).val()
                                + '"</strong></td></tr>');
                    } else {
                        $('.search-query-sf').remove();
                    }

                    if (rowText.indexOf(inputText) == -1) {
                        //hide rows
                        tableRowsClass.eq(i).hide();
                    } else {
                        $('.search-sf').remove();
                        tableRowsClass.eq(i).show();
                    }
                });
                //all tr elements are hidden
                if (tableRowsClass.children(':visible').length == 0) {
                    tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
                }
            });
});

but when I’ve changed to dynamic table I have this result which make the word searching for : repeated n times !

enter image description here

I tried to change the code of the script but I failed to have the right script.
could some one help me please ?

Tags:

3

Answers


  1. 0

    It looks like this might be the problem 

    tableRowsClass.each(function(i, val) {
               //Lower text for case insensitive
               var rowText = $(val).text().toLowerCase();
               var inputText = $(that).val().toLowerCase();
               if (inputText != '') {
                   $('.search-query-sf').remove();
                   tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'+ $(that).val()+ '"</strong></td></tr>');

    .each means that you’re adding <tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'+ $(that).val()+ '"</strong></td></tr> to the start (because it’s prepend) of your table, one for every element using .table-list-search tbody tr

    try just moving tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'+ $(that).val()+ '"</strong></td></tr>'); outside of the .each() so that it only runs once.

    Login or Signup to reply.
  2. 0

    I echo Jamie’s answer, but I’d do a bit more refactoring.

    I would move the searching out into its own function and pass the required rows collection and search string into it.

    I would also move the check for search text outside the each loop, because the value is available outside the loop and doesn’t change.

    $(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');
    var searchTable = function(rows, searchStr){
        var searching = false;
        rows.each(function(i, val){
            var rowText = $(val).text().toLowerCase();
            if (rowText.indexOf(searchStr) == -1) {
                //hide rows
                rows.eq(i).hide();
            } else {
                $('.search-sf').remove();
                rows.eq(i).show();
            }
            if (rows.children(':visible').length == 0) {
                tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
            }
        }
    };

    //something is entered in search form
    $('#system-search')
        .keyup(function() {
            var that = this;

            // affect all table rows on in systems table
            var tableBody = $('.table-list-search tbody');
            var tableRowsClass = $('.table-list-search tbody tr');
            var inputText = $(that).val();
            $('.search-sf').remove();

            if (inputText != ''){
                $('.search-query-sf').remove();
                searchTable(tableRowsClass, inputText.toLowerCase())
                tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "' + inputText + '"</strong></td></tr>');
            }
        });
});
    Login or Signup to reply.
  3. 0

    An alternative to using javascript to create the repeating table row could be to use the hidden attribute and use javascript to remove that attribute whenever the .keyup event fires. You can then use javascript to set the value of a span tag with the search query. I couldn’t get this example to work on jsFiddle or plunker, but i made an example. (this is pure raw JS with no styling)

    <head>
<script type="text/javascript">
function doSearch(){
      document.getElementById("searchingForRow").removeAttribute("hidden");
     document.getElementById("searching").innerHTML = document.getElementById("system-search").value
}

</script>
</head>

<body>
  <div class="col-md-9">

<div class="input-group">
  <form>
    <div>
      <input id="system-search" placeholder="Search for" >
            <button type="submit" class="btn btn-default" onclick="doSearch()">
                Search
            </button>
    </div>
  </form>
</div>
<table>
  <thead>
    <tr>
      <th>id</th>
      <th>Name</th>
      <th>Surname</th>
      <th>email</th>
      <th>contact</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tr class="search-query-sf" id="searchingForRow" hidden>
    <td colspan="6"><strong>Searching for: <span id="searching"></span></strong></td>
  </tr>
  <tbody>
    <tr>
      <td>An Example data this does nothing</td>
    </tr>
  </tbody>
</table>

    this example, when the search button is clicked, removed the hidden attribute, making that row visible, and set’s the span in the row to the value of the textbox.

    it’s essentially what you are trying to do.

    with this method, it doesn’t matter how many times the code to remove the hidden attribute is called, nothing will render more than once.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search