Getting access to Search field

Getting access to Search field

chuckgchuckg Posts: 17Questions: 7Answers: 0
edited June 2022 in General

I have a popup menu added to the search mechanism.

    function formatm(table) {
        // search popup
        return '<select name="prsl" id="prsl">' +
            '<option value="starting with" ' +
            ((shwhr === 'starting with' || state === '') ? ' selected' : '') + '>starting with</option>' +
            '<option value="sounds like" ' +
            (shwhr === 'sounds like' ? ' selected' : '') + '>sounds like</option>' +
            '</select>';
    }

The table

    $(document).ready(function () {
        // Setup - add a text input to each footer cell
        var table = $('#pr').DataTable({
           "processing": true,
            "serverSide": true,
           // popup field added to DOM here:
            "dom": "<'tbh'l<'metaphone'>f>rtip",
            'deferLoading': 0,
            "stateSave": true,
            "stateDuration": -1,
            "stateLoadParams": function (settings, data) {
                data.search.search = "";
            },
            "ajax": {
                "url": "/shpr.php",
                // "data": function (d) {
                //     d.where = shwhr;
                // }
            },
            "pagingType": "input",
            "columns": [
                {
                    "className": 'dt-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {"name": 'name'},
            search: {"return": true},
            lengthMenu: [25, 50, 100]
            }
        });

       // add popup select menu
        $("div.metaphone").html(formatm(table));

       // add popup response handler
        $(document).ready(function () {
            $("#prsl").change(function () {
                var table = $('#pr').DataTable();


/*
This is a server side data request so the search field is set to trigger a search only an a return key.
If a user alters the search field and then without hitting return they click on the popup menu that triggers this draw
*/

                table.columns(COLUMN1).search($(this).find(":selected").text()).draw();

/*
  The trouble with that is that the draw uses the state value of search field rather the browser value of search field.
  After redrawing the table the search field is restored from state and the user's input is replaced.

  Somehow I have to get the keystroke on the search field to change the state or I have to set the state value in the popup 
  response handler from the search field. However the search field doesn't have a name or id that let's me get ahold of it.

 What to do?
*/
    })
  })
)}

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    I don't understand all of what you are saying. Your select search in the formatm function is a custom element not created by Datatables.

    The trouble with that is that the draw uses the state value of search field rather the browser value of search field.

    Sounds like you are saying that the search uses the selected option not any additional text entered by the user. correct? Maybe .find(":selected") should be replaced by .val() to get the value of the input.

    I'm not sure what popup you are referring to. Please post a link to your page or a test case replicating the issue so we can debug the running code.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • chuckgchuckg Posts: 17Questions: 7Answers: 0
    edited June 2022

    Explaining a datatables problem is not simple.
    http://live.datatables.net/rikayepi/1/edit
    set search to "b", press enter
    set search to "a", set Any Position popup to "System Architect"
    voila, the Search field is set to "b" which it is getting from State
    possible solutions?:
    get keypress on Search field to update State?
    get popup menu to update State with current Search value?

    to repeat you may have to clear local storage otherwise the search results go to empty for some reason.

    I hope I set the live.datatables.net properly.
    First time I've used it.

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216
    edited June 2022 Answer ✓

    I hope I set the live.datatables.net properly.

    It demonstrates the issue so you set it up perfectly. Plus the replication steps are helpful :smile:

    I think this is what you are asking for:
    http://live.datatables.net/rikayepi/2/edit

    Basically it gets the global search input value the performs a search() to update the table. Then the column()search(). If you choose Technical Author in step 2 you will see the expected result.

    Kevin

  • chuckgchuckg Posts: 17Questions: 7Answers: 0

    Ah, that was easy. I didn't look to the enclosing div for an id.
    Not sure why the Search field itself doesn't have an id or name.

    thanx

  • allanallan Posts: 57,737Questions: 1Answers: 9,204 Site admin

    Not sure why the Search field itself doesn't have an id or name.

    It doesn't need them for how we use them. They could be added with an extra line or two in the initialisation of your table, but I think just the selector for it is fine.

    Allan

  • chuckgchuckg Posts: 17Questions: 7Answers: 0

    Uh oh.

    Is there a problem with this solution?

         var table = $('#pr').DataTable();
         // Get the search input value
         var searchVal = $('#pr_filter').find('input').val();
         table.search(searchVal);
         table.columns(COLUMN1).search($(this).find(":selected").text()).draw();
    

    Since the search is a potentially costly server side search, isn't this going to trigger two searches?

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216
    Answer ✓

    You can use your browser's network inspector to verify this but the draw() in line 5 executes the search. So, one server request will be sent with both searches.

    Kevin

  • chuckgchuckg Posts: 17Questions: 7Answers: 0

    If only I had read the documentation further:
    table.search
    Please be aware that this method sets the search to apply to the table only - it does not actually perform the search.

Sign In or Register to comment.