jquery auto完成不起作用

Question

我有這個jquery / JS代碼：

<script type="text/javascript">
$(function() {
    var availableTags = ["VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental (Leasing Handsets)","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP IVR Rental","VoIP Extension Rental. Handsets being leased for 3 years.","Multiple VoIP Call Diverts","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","PSTN Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","Integra Fibre Unlimited","Integra Fibre","Fibre Unlimited Broadband","ADSL 2+ Broadband","Integra Fibre Pro - 100Gb Download usage","ISDN30 Channels","ISDN Calling Line Identity","40 DDI Numbers","PSTN\/Analogue Phone Line (01702 330012)","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","Monthly PC Maintenance","Monthly PC Maintenance (Over the phone support only)","Monthly PC Maintenance","Monthly PC Maintenance","Monthly PC Maintenance","Monthly PC Maintenance","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts (nextlevelofmobileadventure.co.uk)","Monthly PC Maintenance","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","VoIP Extension Rental","VoIP Extension Rental","Hosted Exchange Email Accounts","VoIP Fax Extension","Integra Unlimited Fibre Connection","Integra 50 Plan (Line & Broadband) 36 month Contract","PSTN Line Rental","Integra Business Bronze","Hosted Exchange Mailboxes","VoIP Extension Rental","PSTN\/Analogue Phone Line","Monthly PC Maintenance","Integra Bundle (Line \/ Broadband \/ VoIP)","Level 4 BT Response","PSTN Phone Line","Level 4 BT Response","Integra Fibre Unlimited",null,"BT 1571 Service","VoIP Extension Rental","VoIP Extension Rental","Phone Line Rental (for Fibre)","Integra Fibre Pro","Bespoke CRM Database","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Professional Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Hosted Exchange Email Accounts","Hosted Exchange Mailboxes","VoIP Extension Rental","Tool Room PSTN Line","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","Hosted Exchange Email Accounts (tolmers.org.uk)","PSTN \/ Analogue Line Rental","PSTN \/ Analogue Line Rental","Integra Fibre Unlimited","Integra Fibre Unlimited","Integra Fibre Unlimited","PSTN Phone Line","Level 4 BT Response","Integra Professional Web Hosting","Hosted Exchange Emails Accounts","VoIP Extension Rental","VoIP Extension Rental","Hosted Exchange Email Accounts","PSTN Phone Line","Integra Fibre Unlimited","VoIP Extension Rental","Integra Fibre Pro","Hosted Exchange Mailboxes","Hosted Exchange Mailboxes","Hosted Exchange Mailboxes","Integra Fibre Pro","Business Silver Broadband","Callback Extension","VoIP Extension Rental","No Direct Debit Setup - Monthly Charge","VoIP Extension Rental","Offsite Backup - 50p per GB","VoIP Extension Rental","Business Platinum","PSTN\/Analogue Phone Line","VoIP Extension Rental","Outmail 2000","VoIP Extension Rental","VoIP Extension Rental","PSTN Line Rental","VoIP Extension Rental","VoIP Extension Rental"] //autocomplete
    $(".auto").autocomplete({
        source: availableTags
    });             
});
</script>

但它沒有在我的自動完整文本輸入上顯示列表，如果我將以上內容更改為：

var availableTags = ["VoIP", "VoIP2", "VoIP2"]

它工作正常，並顯示3個選項

PHP代碼生成列表：

<?php
$return_arr = array();
$sql="SELECT * from customer_billing ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
while($result=mysql_fetch_array($rs)) {
    $return_arr[] =  $result["productname"];
}
?>

Answer 1

如果在數組中刪除null ，它們就可以工作

現場演示

UPDATE

如果您不希望在查詢結果中獲得null值，則必須將它（帶有產品名稱的行）設置為NOT NULL 。

它變成一個空的''字符串。

Answer 2

您必須傳遞有效的JSON數據 ，或者另一個選項僅傳遞正常工作的值字段 ，但是您無法傳遞NULL值，您使用單引號 （''） ，

檢查這個工作演示jsFiddle

jQuery的

<script type="text/javascript">
$(function() {
    var  availableTags= [
              {"label" :"VoIP"}, 
              {"label" :"VoIP2"},
              {"label" :"VoIP3"}
   ]
    $(".auto").autocomplete({
        source: availableTags
    });             
});
</script>

檢查這個工作演示jsFiddle

jQuery的

<script type="text/javascript">
$(function() {
    var availableTags = ["VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental (Leasing Handsets)","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP IVR Rental","VoIP Extension Rental. Handsets being leased for 3 years.","Multiple VoIP Call Diverts","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","PSTN Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","PSTN\/Analogue Phone Line","Integra Fibre Unlimited","Integra Fibre","Fibre Unlimited Broadband","ADSL 2+ Broadband","Integra Fibre Pro - 100Gb Download usage","ISDN30 Channels","ISDN Calling Line Identity","40 DDI Numbers","PSTN\/Analogue Phone Line (01702 330012)","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","Monthly PC Maintenance","Monthly PC Maintenance (Over the phone support only)","Monthly PC Maintenance","Monthly PC Maintenance","Monthly PC Maintenance","Monthly PC Maintenance","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts (nextlevelofmobileadventure.co.uk)","Monthly PC Maintenance","Hosted Exchange Email Accounts","Hosted Exchange Email Accounts","VoIP Extension Rental","VoIP Extension Rental","Hosted Exchange Email Accounts","VoIP Fax Extension","Integra Unlimited Fibre Connection","Integra 50 Plan (Line & Broadband) 36 month Contract","PSTN Line Rental","Integra Business Bronze","Hosted Exchange Mailboxes","VoIP Extension Rental","PSTN\/Analogue Phone Line","Monthly PC Maintenance","Integra Bundle (Line \/ Broadband \/ VoIP)","Level 4 BT Response","PSTN Phone Line","Level 4 BT Response","Integra Fibre Unlimited","BT 1571 Service","VoIP Extension Rental","VoIP Extension Rental","Phone Line Rental (for Fibre)","Integra Fibre Pro","Bespoke CRM Database","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Professional Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Integra Starter Web Hosting","Hosted Exchange Email Accounts","Hosted Exchange Mailboxes","VoIP Extension Rental","Tool Room PSTN Line","VoIP Extension Rental","VoIP Extension Rental","VoIP Extension Rental","Hosted Exchange Email Accounts (tolmers.org.uk)","PSTN \/ Analogue Line Rental","PSTN \/ Analogue Line Rental","Integra Fibre Unlimited","Integra Fibre Unlimited","Integra Fibre Unlimited","PSTN Phone Line","Level 4 BT Response","Integra Professional Web Hosting","Hosted Exchange Emails Accounts","VoIP Extension Rental","VoIP Extension Rental","Hosted Exchange Email Accounts","PSTN Phone Line","Integra Fibre Unlimited","VoIP Extension Rental","Integra Fibre Pro","Hosted Exchange Mailboxes","Hosted Exchange Mailboxes","Hosted Exchange Mailboxes","Integra Fibre Pro","Business Silver Broadband","Callback Extension","VoIP Extension Rental","No Direct Debit Setup - Monthly Charge","VoIP Extension Rental","Offsite Backup - 50p per GB","VoIP Extension Rental","Business Platinum","PSTN\/Analogue Phone Line","VoIP Extension Rental","Outmail 2000","VoIP Extension Rental","VoIP Extension Rental","PSTN Line Rental","VoIP Extension Rental","VoIP Extension Rental"] //autocomplete
    $(".auto").autocomplete({
        source: availableTags
    });             
});
</script>

HTML

<input type="text" id="search" class="auto" />

檢查此示例可以幫助您