Question

我正在尝试使用jqueryui创建一个自动完成。我正在回显远程文件search.php中的数据库结果。它在fire bug的响应中显示正确的单词但是suggetion列表根本没有显示在我的HTML页面中。有人可以帮帮我吗？

我在jqueryui.com

中使用了 multipile ,remote demo的代码

我的PHP代码

<?php include("connection.php");
 $q=mysql_real_escape_string($_GET['term']); 
$x="select fieldname from tablename where fieldname like '$q%'"; 
$query=mysql_query($x); 
while($row=mysql_fetch_array($query)) { echo $row['fieldname']."\n"; } ?>
========================================================================

    ------------------------------------------------------------------------

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
        .ui-autocomplete-loading {
            background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
        }
        </style>
        <script>
        $(function() {
            function split( val ) {
                return val.split( /,\s*/ );
            }
            function extractLast( term ) {
                return split( term ).pop();
            }

            $( "#birds" )
                // don't navigate away from the field on tab when selecting an item
                .bind( "keydown", function( event ) {
                    if ( event.keyCode === $.ui.keyCode.TAB &&
                            $( this ).data( "autocomplete" ).menu.active ) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    source: function( request, response ) {
                        $.getJSON( "search.php", {
                            term: extractLast( request.term )
                        }, response );
                    },
                    search: function() {
                        // custom minLength
                        var term = extractLast( this.value );
                        if ( term.length < 2 ) {
                            return false;
                        }
                    },
                    focus: function() {
                        // prevent value inserted on focus
                        return false;
                    },
                    select: function( event, ui ) {
                        var terms = split( this.value );
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push( ui.item.value );
                        // add placeholder to get the comma-and-space at the end
                        terms.push( "" );
                        this.value = terms.join( ", " );
                        return false;
                    }
                });
        });
        </script>
    </head>
    <body>

    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="50" />
    </div>

Answer 1

如果您的远程文件位于不同的域，则必须使用JSONP。 JSON不支持跨域数据传输。

详细了解Same Origin policy

自动完成不显示结果jquery

1 个答案: