text-interface.html

    <!-- Text interface -->

    <div class="row" ng-if="interface === 'text'">

      <hr/>

      <div>
        <p class="lead">

          <div class="dropdown pull-left">
            <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Company&nbsp;
            </span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Company</a></li>
              <li><a href="#">Company Size</a></li>
              <li><a href="#">State</a></li>
              <li><a href="#">Country</a></li>
              <li><a href="#">Website</a></li>
            </ul>
          </div>

          <div class="dropdown pull-left">
            <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              must&nbsp;
            </span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">must</a></li>
              <li><a href="#">should</a></li>
              <li><a href="#">cannot</a></li>
            </ul>
          </div>

          <div class="dropdown pull-left">
            <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              contain&nbsp;
            </span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">contain</a></li>
              <li><a href="#">be exactly</a></li>
            </ul>
          </div>

          <span class="b-form-rows__input" contenteditable="true"></span>

        </p>
      </div>

      <style>
      
        .b-form-rows__input {
          min-width: 50px;
          margin-right: 35px;
          display: inline-block;
          position: relative;
          border-bottom: 3px solid lightblue;
        }
        
        .b-form-rows__input:focus {
          outline: none;
        }
        
        .b-form-rows__input:after {
          width: 34px;
          right: -34px;
          position: absolute;
          content: " or ";
          text-align: center;
          opacity: .5;
        }
        
        .b-form-rows__input:empty:after {
          display: none;
        }

      </style>

      <script>

        $('body')
          .delegate('.b-form-rows__input', 'keypress', function(e){
            var target = $(e.currentTarget);
            console.log('keypress', e.which);
            if (e.which === 13) {
              if (target.text().trim()) {
                $('<span class="b-form-rows__input" contenteditable="true"></span>')
                  .insertAfter(target)
                  .focus();
              }
              e.preventDefault();
            }
          })
          .delegate('.b-form-rows__input', 'keyup', function(e){
            var target = $(e.currentTarget);
            console.log('keyup', e.which);
            if (e.which === 8 && !target.text() && $('.b-form-rows__input').length > 1) {
              target
                .prev()
                .focus()
                .end()
                .remove();

              // set caret position
              // http://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
            }
            e.preventDefault();
          });

        $('.b-form-rows__input').first().focus();

      </script>

      <hr/>

    </div>

    <!-- Text interface -->