Is Search intended to work on input fields?

Is Search intended to work on input fields?

acschultacschult Posts: 2Questions: 1Answers: 0

I have a form similar to Form inputs which depending on someones role can have all or fewer cells in a row as input fields. I notice in my app that input fields are not included in the search, meaning using the example provided that if I search on "33" (a value in an input field), I get no rows, but if I search on "Cox" (a value in a label/div) it will give me 1 result with the name "Cox". Is there a way to have the search include values in the input text fields as well?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,143Questions: 1Answers: 2,586

    Yep, you need to create a custom filter like this example here. I did think there was an example for this, but I couldn't find it.

    Colin

  • kthorngrenkthorngren Posts: 20,294Questions: 26Answers: 4,768
    Answer ✓

    You can use Orthogonal data to segregate the input display and the data (value of input) being sorted and searched. The specific way to do this is dependent on the data source (DOM, Ajax).

    The key thing is that the Datatables data cache is updated with the new value. An input event will need to be used and in the event use row().data() to update the data and draw() to update the sorting and searching cache. See this example:
    http://live.datatables.net/mekujufi/1/edit

    The changed values can be searched and sorted.

    Kevin

  • acschultacschult Posts: 2Questions: 1Answers: 0

    Basically, for us, we are showing elements that are both editable and not editable in a table. The search was unable to search <input> type elements, so providing a non "display" response with the value made the search work appropriately. An example of an editable element (that is disabled to start with):

                            { "data": "allowedValueName",
                                render: function (data, type, row, meta) {
                                    if (type === 'display') {
                                        return '<input class="allowed" type="text" id="row-'+ meta.row +'-avName" value="' + data + '" disabled="true">';
                                    }
                                    return data; //used for search
                                }
                            },
    

    Thanks for the great answers, they were very helpful in getting us moving forward with this.

This discussion has been closed.