标签: jquery-autocomplete

我想设置自动完成插件,仅选择列表中的有效员工.我有一个Employee对象数组,有EmployeeID和EmployeeName.目前,我已经通过复制数组中所有Employee的EmployeeName并将其提供给设置自动完成插件来加载EmployeeName的自动完成.

var employeeNames = new Array();
for (var i = 0 ; i < employees.length ; i++)
{
    employeeNames[a] = employees.Employee[a].Name;
}
$("#txtEmployeeName").autocomplete(employeeNames, {
    multiple: true,
    mustMatch: true,
    autoFill: true
});

它将完成工作,但我想要的是,如果用户想要在此文本框中输入EmployeeID,它也会在EmployeeID上加载建议过滤,尽管它会在建议中显示EmployeeNames.有什么方法可以实现,我记得我在某个地方看到它,但不记得网站.

我过去几个小时一直在摆弄这段代码片段,但我无法理解jQuery的自动完成UI是如何工作的.我按照本教程http://viralpatel.net/blogs/tutorial-create-autocomplete-feature-with-java-jsp-jquery/ 我使用了相同的示例,但我没有向JSP发送请求,而是使用了servlet.请求到达servlet"Fetcher",它也会执行,但没有任何内容返回到页面.这是代码.

public class Fetcher extends HttpServlet {
    [...]

    List<String> countryList = new ArrayList<String>();
    String param = request.getParameter("term");

    countryList.add("USA");
    countryList.add("Pakistan");
    countryList.add("Britain");
    countryList.add("India");
    countryList.add("Italy");
    countryList.add("Ireland");
    countryList.add("Bangladesh");
    countryList.add("Brazil");
    countryList.add("United Arab Emirates");
    PrintWriter out = response.getWriter();
    response.setContentType("text/plain");
    response.setHeader("Cache-Control", "no-cache");
     for(String country : countryList){
        out.println(country);
    }

    [...]
}

HTML中的Javascript片段:

 <script>
       $(function() {

         $( "#tags" ).autocomplete({
          source: "Fetcher"

      });
 });
 </script>

HTML表单:

 <label for="tags">Tags: </label>
 <input id="tags" />

页面上的示例似乎是在jquery中为专业人士编写的, http://jqueryui.com/autocomplete/#default.请,有人可以告诉它究竟是如何工作的,以便我可以在其他地方使用它.

我编写了一个自定义jquery自动完成功能来显示某些值和文本字段,以便根据以下代码选择值进行更新:

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

$('#promoitem').autocomplete({
        source: "BckProcesses/GetPromoItems.asp",
        create: function() {
            $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
                return $('<li>')
                .append('<a>' + item.promodesc + '</a>')
                .appendTo(ul);
            }
        },
        select: function(event, ui) {
            $('#promoitem').val(ui.item.promodesc); 
            $('#promocost').val(ui.item.promocost);
            $('#promoqty').val(ui.item.qty);
            $('#hidden_promo_item_id').val(ui.item.id);
        }
    });

这是源文件返回的内容(GetPromoItems.asp)

[{"id": "1", "promodesc": "Ipad 4 ", "promocost": "200", "qty": "1"},{"id": "2", "promodesc": "Village Tickets", "promocost": "20", "qty": "2"}]

但是,当我从ul中选择值时,除promoitem文本字段外,所有内容都会被填充.那些领域变成了空白.

任何人都可以让我知道是什么原因造成的？

谢谢山姆

这是我完整的 jquery js 脚本。下拉菜单工作正常。但是当我选择一行时，我想填写 2 个字段：值和 id。但它不起作用。

$(\'#rechercher_personne\').autocomplete({\n    source : function(requete, reponse){ // les deux arguments repr\xc3\xa9sentent les donn\xc3\xa9es n\xc3\xa9cessaires au plugin\n        $.ajax({\n            url : $(\'#url_for_ajax\').val() + \'/getListePersonneAjax\',\n            dataType : \'json\', // on sp\xc3\xa9cifie bien que le type de donn\xc3\xa9es est en JSON\n            data : {nom : $(\'#rechercher_personne\').val(), maxRows : 15},\n\n            success : function(donnee){\n                  console.log(donnee);\n                reponse($.map(donnee, function(objet){\n                    return objet.id + \', \' + objet.value; \n                }));\n            }\n        });\n    },\n    minLength: 3,\n\n      select: function( event, ui ) {\n\n        $( "#id_personne" …

我正在使用 jquery UI 来显示我的自动完成功能。当我输入时，它工作正常，直到我意识到有问题：

当我键入并显示数据列表时，我按键盘上的箭头键（向上或向下箭头），然后在文本框中显示 ID，而不是标签。

$("#artwork").autocomplete({
    source: "{!! route('admin.theme.getart') !!}",
    select: function (event, ui) {
        event.preventDefault();
        this.value = ui.item.label;
        $("[name='artwork_id']").val(ui.item.value);
    }
});

如何修复这个错误？

非常简短的背景:

我正在使用Jquery Autocomplete从数据库中查找项目的值.然后以某种方式将该值赋予同一表单中的隐藏字段,然后将其插入到数据库中.

稍微复杂化的是我正在通过Jquery Ui Tabs工作,我过去并没有带来很多乐趣.

因此,文件中的一些代码会创建选项卡:

<script type="text/javascript">
function findValue(li) {
    // if( li == null ) return alert("No match!");

    // if coming from an AJAX call, let's use the CityId as the value
    if( !!li.extra ) var sValue = li.extra[0];

    // otherwise, let's just display the value in the text box
    else var sValue = li.selectValue;
}

function selectItem(li) {
    findValue(li);
}

function formatItem(row) {
    return row[0];
}

function lookupAjax(){
    var oSuggest = $(".role")[0].autocompleter;

    oSuggest.findValue();

    return …

有没有办法修剪(删除前导/尾随空格)用户输入到jQuery自动完成文本<input>框的输入,然后再与名称列表匹配:值？我目前有一个文本框,用户可以在其中输入名称.然后通过jQuery将名称与name:value对列表进行匹配:

<script type="text/javascript">

var resources = [
               <?php 
                    foreach($data['Resource'] as &$row){
                        $Name = $row['Forename']." ".$row['Surname'];  
                        echo "{";
                        echo "  label:'$Name',";
                        echo "  value:'$row[EmployeeNumber]'";
                        echo "},";
                    }
                 ?>
                ];

    jQuery(function(){
        jQuery('#Resource').autocomplete({
            source: resources,
            focus: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                return false;
            },          
            select: function(event, ui) {
                jQuery('#Resource').val(ui.item.label);
                jQuery('#EmployeeNumber').val(ui.item.value);
                return false;
            }
        });
    }); 
</script>

我的问题是,如果用户输入的名称与resources地图中的名称匹配,但在其后面带有空格,则不会匹配,因此不会为输入分配任何值.如果可能的话,我希望在此映射中至少忽略尾随空格(如果不是前导空格).

另外,如果没有找到地图,是否可以为输入框添加默认值？

编辑:

另外,如果用户输入的内容不匹配,是否可以在下拉自动填充框中显示不匹配条目？为问题后编辑道歉.

我有一组字段.在读取模式下,它们在表格单元格中显示为文本.双击单元格将记录置于编辑模式.在编辑模式下按"enter"将提交更改.在编辑模式下按"esc"将返回读取模式而不更改数据.

现在,每个字段都添加了一个jQuery UI自动完成控件. 当自动完成菜单可见时,我希望"输入"表现为通常对自动完成的行为(用所选菜单值替换输入中的值并关闭自动完成菜单)而不提交更改/返回编辑模式.当按下escape时,如果菜单打开,执行常用的自动完成功能(将编辑字段返回到其先前的值并关闭菜单),而不返回读取模式.

我在这里放了一个我的问题的演示.目前,如果您在其中一个自动完成菜单项上按"输入",则自动完成会执行其操作并立即提交更改.按退出将关闭自动完成菜单并取消编辑模式.

我很难过.我有一个现有的自动完成功能,当从ColdFusion自动提示输入调用时,它可以工作.现在,我正在尝试将页面转换为使用jQuery自动完成输入,并且无法使其工作.这是autosuggest.cfc中的现有函数:

<cffunction name="lookupSerialNumber" access="remote" returntype="Array" >
    <cfargument name="search" type="any" required="false" default="">

    <!--- Define variables --->
    <cfset var data="">
    <cfset var result=ArrayNew(1)>

    <!--- Do search --->
    <cfquery name="data">
        SELECT DISTINCT SERIAL_NUMBER
        FROM myTable
        WHERE SERIAL_NUMBER LIKE '%#trim(ARGUMENTS.search)#%'
        ORDER BY SERIAL_NUMBER
    </cfquery>

    <!--- Build result array --->
    <cfloop query="data">
        <cfset ArrayAppend(result, list)>
    </cfloop>

    <!--- And return it --->
    <cfreturn result />
</cffunction>

当我在输入"01"后从我的自动完成输入中调用它时,控制台会显示如下响应:

   ["0000003001","0100002000","0100002001","0100002002","0100002003","0100002004",7300000100,7300000101,7300000102,7300000103,7300000104,7300000105,7300000107,7300000108,7300000109,7300000110,7300000111,7300000112]

请注意,前六个响应在双引号内,而其余的不是.自动完成功能显示前六个响应,但不显示其余响应.

这是我的第一个问题.第二个是我希望将响应注入到输入的文本和值中; 目前,只有文字显示回复.我并不感到惊讶,因为我只返回一个值.但是,我无法弄清楚如何实现这一目标.

我尝试用解析函数初始化自动完成,如下所示:

$(document).ready(function(){
        $('#myInputID').autocomplete(
            {source: function(request, response) {
                $.ajax({
                    url: "cfc/autoSuggest.cfc?method=lookupSerialNumber>&returnformat=json",
                    dataType: "json",
                    data: {
                      search: …

我正在使用devbridge的自动完成jQuery脚本.是否可以选择从单词的开头过滤搜索而不是应用于单词中的任何位置？

就像我输入"R"一样,我希望只看到以R开头的单词,而不是每个单词中的R字符.

基本上,从一开始的过滤器搜索是我正在寻找的.

怎么可以这样做？这有选择吗？

<script>
$(function() {

var fruits = [
   { value: 'Apple',  data: 'Apple' },
   { value: 'Pear',   data: 'Pear' },
   { value: 'Carrot', data: 'Carrot' },
   { value: 'Cherry', data: 'Cherry' },
   { value: 'Banana', data: 'Banana' },
   { value: 'Radish', data: 'Radish' }
];

  $("#autocomplete").autocomplete({
        lookup: fruits,
        onSelect: function (suggestion) {
          alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
  });
});
</script>