Question

我试图从表中获取自动调用数据，如下所示：http://jqueryui.com/autocomplete/#remote-jsonp

我按照代码，在控制台中，我可以看到返回的结果。但是，下拉列表从未显示，并且查看源代码，ul <ul id="ui-id-2" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" tabindex="0" style="display: none;"></ul>永远不会填充列表项。

这就是控制台中的响应：

["Bethany University","College of the Canyons","Grand Canyon University","Bais Binyomin Academy","Albany Technical College","Albany State University","Bethany Theological Seminary","Saint Anthony College of Nursing","Bethany College","Barrett and Company School of Hair Design","Allegany College of Maryland" ,"Bethany Lutheran College","Rainy River Community College","Farmington Missouri Hospital Company","JFK Medical Center Muhlenberg Harold B. and Dorothy A. Snyder School of Nursing","Albany College of Pharmacy" ,"Albany Law School","Albany Medical College","Brittany Beauty School","SUNY Broome Community College" ,"CUNY School of Law at Queens College","SUNY Downstate Medical Center","Maria College of Albany","Nyack College","Sage College of Albany","SUNY College of Technology at Alfred","SUNY College of Technology at Canton","SUNY College of Technology at Delhi","SUNY College of Agriculture and Technology at Cobleskill" ,"SUNY Farmingdale","SUNY College of Agriculture & Technology at Morrisville","SUNY at Albany","SUNY at Binghamton","SUNY at Buffalo","SUNY Stony Brook","SUNY College of Environmental Science and Forestry" ,"SUNY Polytechnic Institute","SUNY College at Brockport","SUNY Buffalo State","SUNY College at Cortland" ,"SUNY at Fredonia","SUNY College at Geneseo","SUNY College at New Paltz","SUNY Oneonta","SUNY College at Oswego","SUNY Potsdam","SUNY Purchase","SUNY College of Optometry","SUNY College at Old Westbury" ,"SUNY College at Plattsburgh","SUNY Empire State College","SUNY Maritime College","SUNY Upstate Medical University","Allegheny Wesleyan College","Kenyon College","Community College of Allegheny County","Allegheny College","Gaither and Company Beauty College","Jenny Lea Academy of Cosmetology","St. Anthony Hospitals - Centura Health","Wilkes-Barre General Hospital\/Wilkes-Barre Hospital Company, LLC","Santiago Canyon College","Turner Job Corps Center - Albany","Steuben-Allegany BOCES","Cattaraugus-Allegany-Erie-Wyoming BOCES Olean Center","JFK Medical Center Muhlenberg Harold B. and Dorothy A. Snyder School","Central Coast Adult School - California Men's Colony","Sunnyvale - Cupertino Adult & Community Education","New World Symphony","Center for Montessori Teacher Education NY","SUNY - Educational Opportunity Center" ,"Video Symphony Enter Training, Inc.","Sunnyside Beauty Academy","VA NY Harbor Healthcare System - Manhattan" ,"Allegheny General Hospital","The Language Company","G. V. (Sonny) Montgomery Veterans Affairs Medical Center","St. Anthony Hospital","Blue Sky Associates of Western NY Dale Carnegie Training","Bethany Village Retirement Center","Gwendolyn & Company d\/b\/a The Salon Professional Academy of Elgin","Cattaraugus-Allegany-Erie-Wyoming BOCES Belmont Center","Cattaraugus-Allegany-Erie-Wyoming Ellicottville Center","VA NY Harbor Healthcare System - Brooklyn","SUNY Buffalo School of Dental Medicine","The Academy of Cosmetology & Esthetics , NYC LLC","Lawrence & Company College of Cosmetology","Lawrence & Company College of Cosmetology - Selma" ,"Bethany Global University","Albany Stratton VA Medical Center","Discovery Diving Company","Dale Carnegie Center of Excellence - NYC\/Westchester","Kenny?s Academy of Barbering","Christina and Company Education Center","Kenny?s Beauty Academy, Inc.","Cattaraugus-Allegany-Erie-Wyoming Olean Center","Harmony Health Care Institute","Hunter College - CUNY","York College - CUNY","English Language and Culture Institute-Albany" ,"Open Hearts Language Academy - NYC","The ESL School at NYFA","The ESL School at NYFA, New York","The ESL School at NYFA, South Beach","Johnny Matthew?s Hairdressing Training School","Karunya Institute Of Technology ( Deemed University)","Al-Birony University","Dunya Institute of Higher Education","Universit \u00e9 Julius Nyerere Kankan","D\u00e1niel Berzsenyi Teacher Training College","Kodolanyi Janos University College","P\u00e1zm\u00e1ny P\u00e9ter Catholic University","S\u00e9chenyi Istv\u00e1n University","Universitas 17 Agustus 1945 Banyuwangi","China Medical University Shenyang","Shenyang Institute of Chemical Technology" ,"Shenyang Jianzhu University","Shenyang Pharmaceutical University","Shenyang Polytechnic University" ,"Shenyang University","International University in Germany","Universitat Internacional de Catalunya" ,"Universitat Oberta de Catalunya","Sanyo Gakuen University","Jomo Kenyatta University of Agriculture and Technology","Kenya College of Accountancy","Kenya Medical Training College","Kenya Methodist University" ,"Kenyatta University","Mount Kenya University","Multimedia University of Kenya","South Eastern Kenya University","Technical University of Kenya","Hanyang University","Konyang University","Technological University (Monywa)","Ebonyi State University","University \"Transilvany\" of Brasov","Linguistic University of Nizhny Novgorod","Nizhny Novgorod State Academy of Medicine","Nizhny Novgorod State Architectural - Building University","Nizhny Novgorod State Technical University","Nizhny Novgorod State University" ,"Smolny University","Nanyang Technological University","Mwalimu Nyerere Memorial Academy"]

这种格式错误吗？我知道如果我们简单地做一个非回调列表，它的格式如上。我有另一个输入路径，它的功能非常好。

这里是js：

<script>
    $( function() {
        $( "#select-college-input" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "/colleges.php",
                    dataType: "jsonp",
                    data: {
                        q: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            minLength: 2,
        });
    } );
</script>

HTML：

<input type="text" class="form-control" id="select-college-input" placeholder="University or College">

PHP：

    $q = $_REQUEST['q']; 
    $query = 'SELECT [ID], [Name] FROM [dbo].[Colleges] WHERE [Name] LIKE \'%'.$q.'%\'';
    $results = runQuery($connection, $query);

    $json = array();

    while($row = odbc_fetch_array( $results)) {
        array_push($json, $row['Name']);
    }

    echo json_encode($json);

Answer 1

您的服务器返回一个json STRING ，它将由jQuery插件as URL解释

插件期望结果为数组

将服务器响应转换为数组，然后再将其传递给插件成功函数

解决方案1 （将响应数据转换为客户端的数组）

替换此行

success: function( data ) {
    response( data );
}

用这个

success: function( data ) {
    try {
        data = JSON.parse(data);
    }catch(e){}
    response( data );
}

解决方案2 （给客户端提示响应是JSON，以便浏览器可以为您转换）

<?php
header('Content-Type: application/json');

IMO我更喜欢做这两件事，因为您的应用程序将来可能涉及其他类型的客户端，并且您不能依赖客户端（浏览器）来解析JSON

Jquery自动填充UL列表未填充

1 个答案: