jQuery的自動完成列表UL不填充

Question

我想有從表中autocomplte呼叫數據，在這裏：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