netdisco/share/views/ajax/device/snmp.tt

<div class="row">
    <div class="span5">
        <div id="jstree" class="nd_scrollable"></div>
    </div>
    <div id="snmpnodecontainer" class="span8">
        <form id="nd_snmp_search_form" class="form-inline col-md-4">
          <span class="form-group">
            <i id="nd_snmp_loading_spinner" class="icon-circle-blank icon-large"></i>
            &nbsp;

            <input id="nd_snmp_search_text" type="text"
             class="form-control nd_snmp_search_param span5"
             name="term" required placeholder="Search for label or OID">

            <button type="submit" class="btn btn-default">Search</button>

            &nbsp;
            <label class="checkbox-inline"
              rel="tooltip" data-placement="top" data-offset="5"
              data-title="Anchored to the beginning">

              <input type="checkbox" id="nd_snmp_search_partial"
                name="partial" class="nd_snmp_search_param"> Partial </input>
            </label>

            &nbsp;
            <input type="checkbox" id="nd_snmp_search_deviceonly"
              name="deviceonly" class="nd_snmp_search_param"
              checked="checked"> Only this device </input>

            <input type="hidden" id="nd_snmp_search_ip"
              name="ip" class="nd_snmp_search_param" value="[% device %]" />
          </span>
        </form>
        <div id="node">
          <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" class="span1">OID</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Module</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Leaf</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Status</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Access</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Type</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Index</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Filter</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Enum Syntax</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Description</th>
                  <td></td>
                </tr>
                <tr>
                  <th scope="row">Value</th>
                  <td></td>
                </tr>
              </tbody>    
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
  $(function () {
    var jstree_search_callback = function(str, node) {
      var mib  = str.replace(/::.+/,'');
      var leaf = str.replace(/.+::/,'');

      var pattern = str.replace(/.+::/,'').toLowerCase();
      var name = node.text.toLowerCase();
      var oid  = node.id.toLowerCase();

      if (document.getElementById('nd_snmp_search_partial').checked) {
        if ((name.indexOf(pattern) == 0) || (oid.indexOf(pattern) == 0)) {
          return true;
        }
      }
      else if (mib.length && leaf.length && mib != leaf) {
        if ((mib == node.original.mib) && (leaf == node.original.leaf)) {
          return true;
        }
      }
      else {
        if ((name.indexOf(pattern + ' ') == 0) || (oid == pattern)) {
          return true;
        }
      }
      return false;
    };

    $('#jstree').jstree({
      'core': {
        'multiple' : false,
        'themes': {
          'name': 'proton',
          'responsive': true
        },
        'data' : {
          'url' : function (node) {
            return ('[% uri_base | none %]/ajax/data/device/[% device %]/snmptree/'
              + (node.id === '#' ? '.1' : node.id));
          }
        }
      },
      'plugins': ['search'],
      'search': {
        'ajax' : {
          'url' : '[% uri_base | none %]/ajax/data/snmp/nodesearch',
          'beforeSend' : function(jqXHR, settings) {
            $('#nd_snmp_loading_spinner').removeClass('icon-circle-blank icon-exclamation-sign text-success')
                                         .addClass('icon-spinner text-warning icon-spin');

            if (document.getElementById('nd_snmp_search_partial').checked) {
              settings.url = settings.url + '&partial=on';
            }

            return true;
          },
          'error' : function() {
            $('#nd_snmp_loading_spinner').removeClass('icon-spinner text-warning icon-spin')
                                         .addClass('icon-exclamation-sign');
          }
        },
        'search_callback' : jstree_search_callback
      },
    });
    $('#snmpnodecontainer').on("change", "#munger", function(e, data) {
      var ary = $('#jstree').jstree('get_selected');
      $('#node').load('[% uri_base | none %]/ajax/content/device/[% device %]/snmpnode/'
        + ary[0] + '?munge=' + $('#munger').find(":selected").text());
    });
    $('#jstree').on("changed.jstree", function (e, data) {
      if (data.selected && data.selected != "#") {
        $('#node').load('[% uri_base | none %]/ajax/content/device/[% device %]/snmpnode/' + data.selected);
      }
    });
    $('#jstree').on("search.jstree", function (e, data) {
      if (data.res.length) {
        $('#node').load('[% uri_base | none %]/ajax/content/device/[% device %]/snmpnode/' + data.res[0]);

        $("#jstree").jstree().deselect_all(true);
        $('#jstree').jstree('select_node', data.res[0] + '_anchor');

        var node = $('#jstree').jstree("get_selected", true);
        var path = $('#jstree').jstree().get_path(node[0], false, true);
        var parent = path[path.length - 2];
        document.getElementById( parent ).scrollIntoView();

        $('#nd_snmp_loading_spinner').removeClass('icon-spinner text-warning icon-spin')
                                     .addClass('icon-circle-blank text-success');
      }
    });
    $("#nd_snmp_search_form").submit(function(e) {
      $("#jstree").jstree("search", $("#nd_snmp_search_text").val());
      e.preventDefault();
    });
    $('#nd_snmp_search_text').autocomplete({
      source: function (request, response)  {
        var query = $('.nd_snmp_search_param').serialize();
        return $.get( uri_base + '/ajax/data/snmp/typeahead', query, function (data) {
          return response(data);
        });
      }
      ,delay: 150
      ,minLength: 2
    });
  });
</script>