在页面加载时选择自动完成值

时间:2012-06-07 23:29:04

标签: javascript jquery html

我有一个使用jQuery自动完成的输入框。我想为页面添加一些功能,以便它可以接受页面加载的值,然后选择自动完成列表中的首选项。我已经创建了一个jsfiddle来演示我的意思:

http://jsfiddle.net/bwhitney/MQpQG/2/

或者这里只是代码:

var myArray = ["apple - a ripe red fruit"
, "banana - yellow fruit grown in bunches"
, "orange - the name says it all"];

$("input#textbox").autocomplete({
    source: myArray
});

$('#clickme').click(function() {
    // select the #1 autocomplete option for the given text "apple"
    // ???
});​

使用html:

<input type="text" id="textbox" />
<input type="button" id="clickme" value="Set the value" />

因此,例如,如果页面加载了值“apple”,则应加载文本“apple - 一个成熟的红色水果”。在这种情况下,发送整个短语“苹果 - 成熟的红色水果”不是一个可行的选择。

我可以编写一个迭代遍历数组中每个项目的循环并解析出第一个单词,但我希望jQuery有更好的方法,因为它已经可以在其列表的顶部得到正确的答案

编辑:为了澄清,我想我是否可以通过按下按钮让它工作我也可以通过在页面加载时传入值来使其工作。这就是我的示例使用按钮而不是页面加载的原因。

1 个答案:

答案 0 :(得分:0)

自己编写它并不费力,无论你如何看待它,你都必须遍历数组才能找到你正在寻找的项目。

var myWord = "apple";

$('#clickme').click(function() {
    for (item in myArray) {
        if (myArray[item].indexOf(myWord) == 0)
            $("#textbox").val(myArray[item]);
    }
});

Demo