如何创建通用（可重用）JavaScript自动完成功能 [英] How to create generic (reusable) JavaScript autocomplete function

问题描述

我现在有一个可用的JavaScript自动完成功能，感谢你们许多人的帮助。现在我想让这个功能可以重用。如下所示，需要为函数的每个实例指定三个变量。我不知道该怎么做，是用这些三个变量的不同值来实例化这个函数。

这是我的HTML字段：

 < div class =ui-widget> 
文字或数值：
< input type =textid =dotmatch/> 
< / div> 
  

这里是我想要保存在自己的.js文件中的JavaScript代码：

  var matchFieldName ='dotmatch'; 
 var resultFieldName ='dotnumber'; 
 var lookupURL =/AutoSuggestJSTest/AutoSuggest.asmx/DOTList; 
 $ b $（函数（）{
 $（'＃'+ matchFieldName）.autocomplete（{
 source：function（request，response）{
 $ .ajax （{
 type：POST，
 url：lookupURL，
 contentType：'application / json'，
 dataType：json，
 data：JSON。 stringify（{prefixText：request.term，count：20}），
 success：function（data）{
 var output = jQuery.parseJSON（data.d）; 
 response（$。 map（output，function（item）{
 return {
 label：item.Label +（+ item.Value +），
 value：item.Value 
} 
}））; 
}，
错误：函数（XMLHttpRequest，textStatus，errorThrown）{
 alert（textStatus）; 
} 
}）; 
}，
 minLength：2，
 select：function（event，ui）{
 $（'＃'+ resultFieldName）.val（ui.item.value）; 
 return ui.item.label; 
} 
}）; 
  

}）;

解决方案

insin很接近。我今天上午制定的解决方案是;
$ b $ pre $ 函数AutoComplete（matchFieldName，resultFieldName，lookupURL）{
$（' ＃'+ matchFieldName）.autocomplete（{
source：function（request，response）{
$ .ajax（{
type：POST，
url：lookupURL，
contentType：'application / json'，
dataType：json，
data：JSON.stringify（{prefixText：request.term，count：20}），
成功：函数（数据）{
var output = jQuery.parseJSON（data.d）;
response（$。map（output，function（item）{
return {
value： item.Label：item.Label +（+ item.Value +）
}
} ））;
}，
错误：函数（XMLHttpRequest，textStatus，errorThrown）{
alert（textStatus）;
}
}）;
}，
minLength：2，
select：function（event，ui）{
$（'＃'+ resultFieldName）.val（ui.item.value）;
}
}）;

$ / code>

在网页上：



 < div id =AutoSuggest> 
 DOT职位或编号：
< input type =textid =dotmatchstyle =width：300px; /> 
< / div> 
  

然后在网页上的标签后面：



 < script type =text / javascriptsrc =js / DOTAutocomplete.js>< / script> 
 
< script type =text / javascript> 
 $（function（）{
 AutoComplete（dotmatch，dotnumber，/AutoSuggestJSTest/AutoSuggest.asmx/DOTList）; 
}）; 
< / script> 
  




I now have a working JavaScript autocomplete function, thanks to help from many of you. Now I want to make the function reusable. There are three variables that need to be specified for each instance of the function, as shown below. What I don't know how to do is instantiate this function with different values for these three vars.

Here is my HTML field:

<div class="ui-widget">
    Text or Value:
    <input type="text" id="dotmatch" />
</div>

And here is the JavaScript code which I want to keep in its own .js file:

var matchFieldName = 'dotmatch';
var resultFieldName = 'dotnumber';
var lookupURL = "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList";

$(function() {
$('#' + matchFieldName).autocomplete({
    source: function(request, response) {
        $.ajax({
            type: "POST",
            url: lookupURL,
            contentType: 'application/json',
            dataType: "json",
            data: JSON.stringify({ prefixText: request.term, count: 20 }),
            success: function(data) {
                var output = jQuery.parseJSON(data.d);
                response($.map(output, function(item) {
                    return {
                        label: item.Label + "(" + item.Value+ ")",
                        value: item.Value
                    }
                }));
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        $('#' + resultFieldName).val(ui.item.value);
        return ui.item.label;
    }
});

});

解决方案

insin was close. The solution I worked out this morning is;

function AutoComplete(matchFieldName, resultFieldName, lookupURL) {
    $('#' + matchFieldName).autocomplete({
        source: function(request, response) {
            $.ajax({
                type: "POST",
                url: lookupURL,
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify({ prefixText: request.term, count: 20 }),
                success: function(data) {
                    var output = jQuery.parseJSON(data.d);
                    response($.map(output, function(item) {
                        return {
                            value: item.Value,
                            label: (item.Label == item.Value) ? item.Label : item.Label + "(" + item.Value + ")"
                        }
                    }));
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#' + resultFieldName).val(ui.item.value);
        }
    });
}

On the web page:

<div id="AutoSuggest">
    DOT Job Title or Number:
    <input type="text" id="dotmatch" style="width:300px;" />
</div>

And on the web page, after the tag:

<script type="text/javascript" src="js/DOTAutocomplete.js"></script>

<script type="text/javascript">
    $(function() {
        AutoComplete("dotmatch", "dotnumber", "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList");
    });
</script>

这篇关于如何创建通用（可重用）JavaScript自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！