Question

您好我有一个搜索表单，它将两个texfields的值组合到第三个文本字段以进行查询。

 <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = 

password.value +''+ passwords.value">

            <label for="search" >Search Input:</label>

<input type="search" name="password" id="result" value="" placeholder="From..." data-

theme="h">

<label for="search" >Search Input:</label>

<input type="search" name="passwords" id="to" value="" placeholder="To..." data-theme="h">

<button class="ui-btn ui-icon-search ui-btn-icon-left ui-shadow-icon ui-btn-

e">Search</button>

<input name="sea" type="text" id="sea">

            </form>

但现在我对我的文本字段应用了实时搜索效果，以便用户可以查看建议并从出来的选项中进行选择。这也有效。

但我注意到以前合并形成第三个文本字段的两个文本字段不再合并，因为oninput操作现在被忽略了，因为我的文本字段给出了实时建议的选项，我该怎么做才能解决这个问题

Answer 1

使用两个文本字段的onchange事件来确保在值之后填充第三个字段在任一文本字段中更改

Answer 2

您可以使用Jquery UI实现自动完成搜索。

在jQuery UI v1.8rc3中，自动完成小部件接受源选项，该选项可以是字符串，数组或回调函数。如果它是一个字符串，自动完成功能会对该URL进行GET以获取选项/建议。如果数组，自动完成执行搜索，正如您所指出的那样，在数组术语中的任何位置都存在类型化的字符。最终的变体是你想要的 - 回调函数。

从自动完成文档：

第三种变体，即回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：

•请求对象，具有名为“term”的单个属性，该属性引用文本输入中当前的值。例如，当用户在设置为自动完成的城市字段中输入“new yo”时，request.term将保持“new yo”。 •响应函数，一种回调，它要求单个参数包含要向用户建议的数据。此数据应根据提供的术语进行过滤，并且必须是允许简单本地数据格式的数组：String-Array或具有label / value / both属性的Object-Array。

示例：

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({


// The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
 source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

检查此链接：

http://jqueryui.com/autocomplete/#default

如何在第三个文本字段中显示具有自动建议的两个文本字段的值

2 个答案: