标签: jquery-autocomplete

如果没有结果,我试图在下拉菜单中显示"无结果"消息.因此,例如,如果我在文本字段中键入"ABCD",并且没有匹配的实体,则显示消息"无结果".将显示.

在通过stackoverflow查看完成此操作的各种不同方法并尝试其中一些之后,我仍然无法使其工作.

如果没有找到结果,如何在下拉菜单中添加"无结果"消息？

jQuery的:

    $element.autocomplete({
        source: function (request, response) {            
            $.ajax({
                url: thUrl + thQS,
                type: "get",
                dataType: "json",
                cache: false,
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        if (data.indexOf(item) === -1) {
                            return { label: "No Results." }
                        } else {
                            return {
                                label: item.Company + " (" + item.Symbol + ")",
                                value: item.Company
                            }
                        }
                    }));
                }
            });
        },
        minLength: that.options.minLength,
        select: function (event, ui) {
               reRenderGrid();
        } …

我有几个使用jQuery自动完成功能增强的输入字段.触发选择事件时如何获取相应的输入字段？

<input name="1" value="">
<input name="2" value="">
<input name="3" value="">

$('input[type=text]').autocomplete({
    source: 'suggestions.php',
    select: function(event, ui) {
        // here I need the input element that have triggered the event
    }
});

我在我的页面上使用AjgularJS并且想要添加一个字段以使用来自jqueryui的自动完成,并且自动完成不会触发ajax调用.

我已经在没有角度的页面上测试了脚本(ng-app和ng-controller)并且它运行良好,但是当我将脚本放在带有angularjs的页面上时它会停止工作.

任何的想法？

jquery脚本:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});

• 有趣的是:当我在Chrome检查器上调用脚本时,自动完成功能开始工作!
• 版本:AngularJS:1.0.2 - JqueryUI:1.9.0

结论: 来自jQueryUI的自动完成小部件必须从AngularJS的自定义指令内部初始化,例如:

标记

<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

        <input type="text" auto-complete>ddd</input>

    </div>
</div>

角度脚本

<script type="text/javascript">

    var app = angular.module('TestApp', []);

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>

我在我的项目中使用jQuery,我需要实现自动完成,但我想避免包含jQuery UI小部件,并希望使用一些特定的外部插件.你能提供一些例子/链接吗？我必须查询返回键值对的远程JSON源.

我想从自动完成之外触发一些jQuery自动完成事件,但我不知道如何.即

$("something").autocomplete({select:function(event,ui){do x},
                                search:function(event,ui){do y}});

$("something else").keypress(function(eventobject){*trigger autocomplete "select"*});

我在触发器自动完成中选择了什么代码"select"

我正在使用jQuery Autocomplete来搜索城市的本地数据库.这是代码:

$('#txt_search_city').autocomplete({
    source: url,
    delay: 0,
    autoFocus: true,
    select: function( event, ui ) {
        $( "#id_city" ).val( ui.item.id );
        $(this).closest('form').submit();
    },
    focus: function( event, ui ) { event.preventDefault(); }
});

我希望默认情况下选择第一个返回值(就像在facebook上一样).所以基本上,如果他们只是点击输入,他们将触发第一个结果的选择.

我认为那是做了什么autoFocus: true,但它不起作用.没有显示错误,只是没有选择第一个结果.

思考？

实际上我正在尝试将自动完成功能实现到一个文本字段,但得到上述错误,无法理解为什么我收到此错误.你能帮我解决这个错误吗？供您参考我将在下面提供所有必要的代码:

报告-学生result.tpl

<link rel="stylesheet" type="text/css" href="{$control_css_url}ui-lightness/jquery-ui-1.10.3.custom.css">  
<link rel="stylesheet" type="text/css" href="{$control_css_url}autocomplete.css">
<label>Name</label>
            <div class="form-element" id="friends">
              <input type="text" class="" name="user_name" id="user_name" value="{$user_name}" />
            </div>

<script language="javascript" type="text/javascript">
$(function(){  

  var class_id = $('#class_id').val();
  var section_id = $('#section_id').val();

        //attach autocomplete  
        $("#user_name").autocomplete({  

            //define callback to format results  
            source: function(req, add){  

                //pass request to server  
                $.getJSON("report_student_result.php?callback=?op=get_student_names&class_id="+class_id+"&section_id="+section_id, req, function(data) {  

                    //create array for response objects  
                    var suggestions = [];  

                    //process response  
                    $.each(data, function(i, val){                                
                    suggestions.push(val.name);  
                });  

                //pass array to callback  
                add(suggestions);  
            });  
        },  

        //define select handler  
        select: …

使用jquery ui自动完成功能创建组合框时,我遇到了奇怪的行为.每当我单击滚动条滚动查看结果列表然后单击我的组合框按钮以关闭结果列表关闭结果然后再次打开.我希望它关闭菜单.

Repro的步骤

1. 打开jsfiddle演示
2. 在自动完成中键入"i"或按下下拉按钮.
3. 单击垂直滚动以滚动结果
4. 单击下拉按钮

用于创建按钮的脚本

 this.button = $("<button type='button'>&nbsp;</button>")
    .attr({ "tabIndex": -1, "title": "Show all items" })
    .insertAfter(input)
    .button({
         icons: {
             primary: "ui-icon-triangle-1-s"
         },
         text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-button-icon")
    .click(function () {

        // when i put breakpoint here, and my focus is not on input, 
        // then this if steatment is false????

        if (input.autocomplete("widget").is(":visible")) {
            input.autocomplete("close");
            return;
        }

        // work around a bug (likely same cause as #5265)
        $(this).blur();

        // pass empty string as …

我这里有小提琴

如果选择了choice1单选按钮,我需要availabletags1作为源,如果选择了choice2单选按钮,我需要availabletags2.我需要通过实际用户选择动态地更改它.

码:

 var availableTags1 = [
"ActionScript",
"AppleScript",
"Asp"
];

var availableTags2 = [
"Python",
"Ruby",
"Scala",
"Scheme"
];

$( "#autocomplete" ).autocomplete({
source: availableTags1
});

$('input[name="choice"]').click(function(){
if(this.checked){
    if(this.value == "1"){
        $( "#autocomplete" ).autocomplete('option', 'source', availableTags1)
    } else {
        $( "#autocomplete" ).autocomplete('option', 'source', availableTags2)
    }

更新:经过我自己的大量艰苦工作,我已经解决了这个问题.我很高兴成为任何需要帮助的人的资源.这是我工作设置的要点.

我已经尝试了我能找到Google和SO的所有解决方案.以下是我尝试过的一些不同的事情:

page.execute_script %Q{$('#{selector}').val('#{value}').trigger('keydown')}

和

fill_in field, with: options[:with]
page.execute_script %Q{ $('##{field}').trigger('focus') }
page.execute_script %Q{ $('##{field}').trigger('keydown') }

这是失败的:

page.should have_selector('ul.ui-autocomplete li.ui-menu-item a')

但是当我在Firebug中查看并在浏览器中测试它时,它肯定存在.

以下是所有细节,包括上述内容的重述.请记住,自动填充字段在浏览器中正常工作.

listing_integration_spec.rb

require "spec_helper"

describe "Listing Integration" do

  let!(:user) { login_user }

  it "lets a user add information listing", js: true do
    listing = create(:listing, user: user)
    click_link('Additional Information')
    click_link('Create')
    fill_autocomplete('listings_search', with: listing.item_id)
  end

end

spec/support/feature_helper.rb

def fill_autocomplete(field, options = {})
  fill_in field, with: options[:with]
  page.execute_script %Q{ $('##{field}').trigger('focus') }
  page.execute_script %Q{ $('##{field}').trigger('keydown') }
  selector …