HTML เลือกแบบฟอร์มพร้อมตัวเลือกในการป้อนค่าที่กำหนดเอง

Question 1

ฉันต้องการมีช่องป้อนข้อมูลที่ผู้ใช้สามารถป้อนค่าข้อความที่กำหนดเองหรือเลือกจากรายการแบบเลื่อนลง ปกติ<select>มีเพียงตัวเลือกแบบเลื่อนลง

ฉันจะ<select>ยอมรับค่าที่กำหนดเองได้อย่างไร ตัวอย่างเช่น: Ford?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Question 2

HTML5 มีกล่องคำสั่งผสมในตัว คุณสร้างข้อความinputและไฟล์datalist. แล้วคุณเพิ่มlistแอตทริบิวต์ไปinputกับค่าของของiddatalist

อัปเดต:ณ เดือนมีนาคม 2019 เบราว์เซอร์หลักทั้งหมด (ตอนนี้รวมถึง Safari 12.1 และ iOS Safari 12.3) รองรับdatalistถึงระดับที่จำเป็นสำหรับฟังก์ชันนี้ ดูวิธีใช้สำหรับการสนับสนุนเบราว์เซอร์โดยละเอียด

ดูเหมือนว่า:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

ขยายข้อมูลโค้ด

Question 3

JSFiddle ล่าสุดของ Alen Saqe ไม่ได้สลับให้ฉันใน Firefox ดังนั้นฉันคิดว่าฉันจะให้วิธีแก้ปัญหา html / javascript แบบง่ายๆที่จะทำงานได้ดีภายในแบบฟอร์ม (เกี่ยวกับการส่ง) จนถึงวันที่เบราว์เซอร์ / อุปกรณ์ทั้งหมดยอมรับแท็กดาต้าลิสต์ สำหรับรายละเอียดเพิ่มเติมและดูการใช้งานจริงโปรดไปที่: http://jsfiddle.net/6nq7w/4/ หมายเหตุ: อย่าให้มีช่องว่างระหว่างการสลับพี่น้อง!

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

Question 4

jQuery โซลูชั่น!

การสาธิต: http://jsfiddle.net/69wP6/2/

การสาธิตอื่น ๆ ด้านล่าง (อัปเดต!)

ฉันต้องการบางสิ่งที่คล้ายกันในกรณีที่ฉันมีตัวเลือกคงที่และฉันต้องการตัวเลือกอื่นเพื่อแก้ไขได้! ในกรณีนี้ฉันสร้างอินพุตที่ซ่อนไว้ซึ่งจะทับซ้อนกับตัวเลือกเลือกและจะแก้ไขได้และใช้ jQuery เพื่อให้ทุกอย่างทำงานได้อย่างราบรื่น

ฉันกำลังแบ่งปันเสียงซอกับพวกคุณทุกคน!

HTML

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

CSS

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

แก้ไข: เพิ่มการออกแบบสัมผัสที่เรียบง่ายอย่างชาญฉลาดเพื่อให้ผู้คนเห็นได้ชัดเจนว่าอินพุตสิ้นสุดที่ใด

JS Fiddle: http://jsfiddle.net/69wP6/4/

Question 5

คุณไม่สามารถจริงๆ คุณจะต้องมีทั้งรายการแบบเลื่อนลงและกล่องข้อความและให้พวกเขาเลือกหรือกรอกแบบฟอร์ม หากไม่มีจาวาสคริปต์คุณสามารถสร้างชุดปุ่มตัวเลือกแยกต่างหากโดยที่พวกเขาเลือกแบบเลื่อนลงหรือป้อนข้อความ แต่ดูเหมือนจะยุ่งสำหรับฉัน ด้วยจาวาสคริปต์บางตัวคุณสามารถสลับปิดการใช้งานอย่างใดอย่างหนึ่งขึ้นอยู่กับว่าพวกเขาเลือกตัวเลือกใดตัวอย่างเช่นมีตัวเลือก 'อื่น ๆ ' ในเมนูแบบเลื่อนลงที่เรียกใช้ฟิลด์ข้อความ

Question 6

หากตัวเลือกดาต้าลิสต์ไม่ตรงตามความต้องการของคุณให้ไปที่ไลบรารี Select2 และ " การสร้างตัวเลือกไดนามิก "

$(".js-example-tags").select2({
  tags: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

ขยายข้อมูลโค้ด

Question 7

ใช้หนึ่งในวิธีแก้ปัญหาข้างต้น (@mickmackusa) ฉันสร้างต้นแบบที่ใช้งานได้ใน React 16.8+ โดยใช้ Hooks

https://codesandbox.io/s/heuristic-dewdney-0h2y2

ฉันหวังว่ามันจะช่วยใครสักคน