Add headers names and values autocomplete using datalist

src/index.html

@@ -292,7 +292,7 @@ <h4>❤️&nbsp;Support the project</h4>
                     params="request: request"
                     data-bind="visible : showRequestBody"></request-body>
                   <entry-list
-                    params="entryList : request.headers"
+                    params="entryList : request.headers, showHeaderList: true"
                     data-bind="visible : showRequestHeaders"></entry-list>
                   <entry-list
                     params="entryList : request.querystring"

src/js/app/components/entry-list/entryListVm.js

@@ -21,10 +21,13 @@ define([
   'knockout',
   'component/entry-list/entryItemVm',
   'app/bacheca',
-], function (ko, EntryItemVm, bacheca) {
+  'app/httpHeaders',
+], function (ko, EntryItemVm, bacheca, httpHeaders) {
   'use strict'
   return function EntryListVm(params) {
     const entryList = params.entryList
+    const showHeaderList = params.showHeaderList ? true : false
+    const httpHeaderNames = Object.keys(httpHeaders)
     const enableFileEntry =
       params.enableFileEntry !== undefined && params.enableFileEntry
     const entryName = ko.observable()
@@ -48,9 +51,19 @@ define([
       return entryType() === 'File'
     }, this)
 
+    const httpHeaderValues = ko.computed(function () {
+      const vals = httpHeaders[entryName()]
+      return vals ? vals : []
+    }, this)
+
     const addOnEnter = (data, event) => {
       const enter = 13
       if (event.keyCode === enter) {
+        if (showHeaderList) {
+          // hitting `enter` on a data-list option while selecting will trigger this
+          // function but `entryValue` would still be `undefined` causing error
+          entryValue(event.target.value)
+        }
         add()
         focusToNameField(true)
       }
@@ -129,6 +142,9 @@ define([
       addOnEnter,
       removeFile,
       onFileSelectedEvent,
+      httpHeaderNames,
+      httpHeaderValues,
+      showHeaderList,
     }
   }
 })

src/js/app/components/entry-list/entryList_view.html

@@ -63,21 +63,52 @@
       class="form-control"
       style="margin-right: 2px; visibility: hidden" />
     <label>Name</label>
-    <input
-      type="text"
-      style="margin-left: 10px"
-      class="form-control"
-      data-bind="value: entryName, hasFocus: focusToNameField" />
+    <span data-bind="if: showHeaderList">
+      <input
+        type="text"
+        style="margin-left: 10px"
+        class="form-control"
+        list="headerNames"
+        data-bind="value: entryName, hasFocus: focusToNameField" />
+      <datalist id="headerNames">
+        <!-- ko foreach: httpHeaderNames -->
+        <option><span data-bind="text: $data"></span></option>
+        <!-- /ko -->
+      </datalist>
+    </span>
+    <span data-bind="ifnot: showHeaderList">
+      <input
+        type="text"
+        style="margin-left: 10px"
+        class="form-control"
+        data-bind="value: entryName, hasFocus: focusToNameField" />
+    </span>
     <select
       class="form-control"
       data-bind="visible: enableFileEntry, value: entryType, options: entryTypes"></select>
     <label style="margin-left: 5px">Value</label>
     <span data-bind="ifnot: isFileEntry">
-      <input
-        type="text"
-        style="margin-left: 10px"
-        class="form-control"
-        data-bind="value: entryValue, event: { keyup: addOnEnter}" />
+      <span data-bind="ifnot: showHeaderList">
+        <input
+          type="text"
+          style="margin-left: 10px"
+          class="form-control"
+          data-bind="value: entryValue, event: { keyup: addOnEnter}" />
+      </span>
+
+      <span data-bind="if: showHeaderList">
+        <input
+          type="text"
+          style="margin-left: 10px"
+          class="form-control"
+          list="headerValues"
+          data-bind="value: entryValue, event: { keyup: addOnEnter}" />
+        <datalist id="headerValues">
+          <!-- ko foreach: httpHeaderValues -->
+          <option><span data-bind="text: $data"></span></option>
+          <!-- /ko -->
+        </datalist>
+      </span>
     </span>
     <span data-bind="visible: isFileEntry">
       <input

src/js/app/httpHeaders.js

@@ -0,0 +1,63 @@
+define([], function () {
+  const headers = {
+    Accept: [
+      '*/*',
+      'application/javascript',
+      'application/json',
+      'image/*',
+      'text/html',
+      'text/plain',
+    ],
+    'Accept-Charset': ['UTF-8', 'UTF-16', 'UTF-32'],
+    'Accept-Datetime': [],
+    'Accept-Encoding': [
+      'aes128gcm',
+      'br',
+      'compress',
+      'deflate',
+      'exi',
+      'gzip',
+      'identity',
+      'pack200-gzip',
+      'x-compress',
+      'x-gzip',
+      'zstd',
+    ],
+    'Accept-Language': [],
+    Authorization: [],
+    'Cache-Control': [],
+    Connection: [],
+    'Content-Length': [],
+    'Content-MD5': [],
+    'Content-Type': [
+      'application/javascript',
+      'application/json',
+      'image/*',
+      'text/html',
+      'text/plain',
+    ],
+    Cookie: [],
+    Date: [],
+    Expect: [],
+    Forwarded: [],
+    From: [],
+    Host: [],
+    'If-Match': [],
+    'If-Modified-Since': [],
+    'If-None-Match': [],
+    'If-Range': [],
+    'If-Unmodified-Since': [],
+    'Max-Forwards': [],
+    Origin: [],
+    Pragma: [],
+    'Proxy-Authorization': [],
+    Range: [],
+    Referer: [],
+    TE: [],
+    Upgrade: [],
+    'User-Agent': [],
+    Via: [],
+    Warning: [],
+  }
+  return headers
+})