javascript - 如何制作有选项的text元素框

Question

事情是这样的，不知道问题描述的对不对：
我需要制作一个跟select元素类似text元素框.

<input readonly id="text1" name="text1" value="" />

点击选中text1的时候，在正下面会弹出一个选项页，然后选中某个选项之后，选项页消失，text1获得选中项的值。

这个体验功能是什么思路技巧做出来的？

数据分析师 · Answer

javascript - 如何制作有选项的text元素框-PHP中文网问答-javascript - 如何制作有选项的text元素框-PHP中文网问答

围观一下哦，学习一下。

大家讲道理 · Answer

一般input+select这样的体验都是为了模糊搜索，而且text的input可以输入内容，用来动态匹配和select里相符的项

但看你描述似乎不需要模糊搜索，这样的体验建议首先将input加上readonly只读属性，禁止用户输入改变数值，select效果用p模拟，绑定click事件将目标值传入input

PHP中文网 · Answer

/* fakecode */
var trigger = document.getElementbyId('text1'),
    toggleFn = function(){
        target.style.display = (target.style.display == '') 'none': '';
    };

trigger.click = function(){
    toggleFn();
}

//setVal
if (target.selected) {
    trigger.value = target.value;
    toggleFn();
}