Editable 'Select' Element

Editable 'Select' element

Nothing is impossible. Here's a solution that simply sets the value of a text input whenever the value of the <select> changes (rendering has been tested on Firefox and Google Chrome):

.select-editable {position:relative; background-color:white; border:solid grey 1px;  width:120px; height:18px;}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;}
.select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value=""/>
</div>

Is there a select-option version of div contenteditable?

If you just have a normal select with some options but don't have a name attribute the selected option will not be submitted:

  <select>
  <option>a</option>
  <option>b</option>
  </select>

So the select can be contained within, and formatted as part of, the form element with no problem,

If you have a name attribute but with an empty name string then it seems browsers will submit the value but with nothing before the =

How to detect if an item is selected and alert its value with this jquery-editable-select plugin

The plugin has a Listener

Listen changes

  $('#select')
        .editableSelect()
        .on('select.editable-select', function (e, li) {
            $('#last-selected').html(
                li.val() + '. ' + li.text()
            );
        });

jQuery Editable Select Demo

how to convert to an editable select box?

This can be achieved by using ng-select

Install ng-select

npm install --save @ng-select/ng-select

app.module.ts

Import it to the module

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgSelectModule } from '@ng-select/ng-select';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    NgSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

style.css

import the ng-select default styling

@import "~@ng-select/ng-select/themes/default.theme.css";

app.component.html

Create the ng-select dropdown by binding nameList as the items array for the dropdown and search function

<div style="text-align:center">
  Editable Dropdown
</div>

<div style="width:300px; height:200px">
  <ng-select class="autocomplete" dropdownPosition="bottom" [searchFn]="searchName" [items]="nameList"
    [(ngModel)]="selectedName" [dropdownPosition]="'auto'">
    <ng-template ng-header-tmp>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">Username</div>
        </div>
      </div>
    </ng-template>
    <ng-template ng-label-tmp let-item="item">
      <span>{{item}}</span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-index="index">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-4">{{item}}</div>
        </div>
      </div>
    </ng-template>
  </ng-select>
</div>

app.component.ts

Initialize the nameList and define the search function. Here I will return names which contain the value entered from the dropdown

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  selectedName: string;
  nameList: string[];

  constructor() { }

  ngOnInit() {
    this.nameList = this.getNameList();
  }

  getNameList(): string[] {
    return [
      'Adam',
      'Alex',
      'Bob',
      'Bennt',
      'Cathrina',
      'Dug',
      'Suzzy',
      'Amy',
      'Milan'
    ];
  }

  searchName(filter: string, item: string) {
    filter = filter.toLocaleLowerCase();
    return (item.toLocaleLowerCase().indexOf(filter) > -1);
  }
}

---

Related Topics