如何.select（）输入值的一部分？

Question

我有一个搜索id的输入，你可以输入一个或多个字母，第一个以字母/字母开头的id将填入输入内部，但正如你所看到的，它仍然不直观：

键入 a 或 ab 以测试代码段。

＆＃13;

＆＃13;

$(document).ready(Hi);
function Hi(){
        var keys = "";
        $("input").keyup(function(e){
                var inp = $(this);
                var wk = event.which;
                if(wk!=8){                                               //if not pressed backspace
                        if((wk >= 65 && wk <= 120) && (wk != 32 && wk != 0)){  //allow just letters
                            keys = keys+ e.key;
                        }
                        inp.val($("p[id^="+keys+"]").attr("id"))
                        //inp.val(inp.val().slice(keys.length));  //this is just the
                        //inp.val(keys+(inp.val().select()));     //idea, but wont work
                }else{
                        inp.val("");
                        keys="";
                }
        });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"/>

<p id="apple"></p>
<p id="abocado"></p>
<p id="abanico"></p>

＆＃13;

＆＃13;

＆＃13;

这个想法是通常只查看键入的字母/字母，然后选择单词的其余部分以让用户知道他可以在输入的文本之后继续输入，而不是在程序填写的整个单词之后。

这样的事情：

有没有办法让这项工作？我也接受了css。

修改

感谢this，我已经完成了这项工作：

＆＃13;

＆＃13;

$(document).ready(Hi);
function Hi(){
        var keys = "";
        $("input").keyup(function(e){
                var inp = $(this);
                var wk = event.which;
                if(wk!=8){
                        if((wk >= 65 && wk <= 120) && (wk != 32 && wk != 0)) { 
                            keys = keys+ e.key;
                        }
                        var par = $("p[id^="+keys+"]").attr("id");
                        inp.val(par)
                        letSelect(inp[0],keys.length,par.length);
                }else{
                        inp.val("");
                        keys="";
                }
        });
}

function letSelect(input, startPos, endPos) {
    input.focus();
    if (typeof input.selectionStart != "undefined") {
        input.selectionStart = startPos;
        input.selectionEnd = endPos;
    } else if (document.selection && document.selection.createRange) {
        input.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"/>

<p id="apple"></p>
<p id="abocado"></p>
<p id="abanico"></p>

＆＃13;

＆＃13;

＆＃13;