jquery auto完成不起作用

Question

I have this jquery/JS Code:

<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>

but its not showing the list on my auto complete text input, if i change the above to be:

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

it works fine and shows the 3 options

PHP Code to generate the list:

<?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

They worked if you remove null in your array

LIVE DEMO

UPDATE

If you don't want to get a null value in your query result, then you have to set it (your row with the product name) to NOT NULL .

It becomes an empty '' string.

Answer 2

You must pass valid JSON data , or another option pass only value field that is ok working but you can not pass NULL value, you use single quote (' ') ,

Check this working Demo jsFiddle

jQuery

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

Check this working Demo 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" />

Check this example help you