Code Monkey home page Code Monkey logo

autocomplete's Introduction

Autocomplete

Documentation & Demo

jQuery Autocomplete plugin like Google search

ScreenShot

npm install jquery-autocomplete

autocomplete's People

Contributors

benoitzugmeyer avatar butschster avatar mpankov avatar suminda123 avatar whitelagoon avatar xdan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

autocomplete's Issues

chinese pinyin have a bug

if you use chinese pinyin, the first letter when knock is fashionable, if a match is detected, will automatically into the letter, should be the focus of switch, how to solve this problem?

I am only getting the first 20 items in list

I am only getting the first 20 items on the list when I use an object, it works fine when I dont. But I need to pass other data and it won't do what I need in the simple way.

I have spent hours on this and cannot figure out what I did wrong.
Pagelink Pass: preview/website

Thanks.


<!--Address Data and Search Autocomplete-->
<!--https://xdsoft.net/jqplugins/autocomplete/-->
<link rel="stylesheet" type="text/css" href="/js/lib/autocomplete/jquery.autocomplete.css"/>
<script async defer type="text/javascript" src="/js/lib/autocomplete/jquery.autocomplete.js"></script>



<script async>

// Autocomplete like Google jView Plugin Help Files
// https://xdsoft.net/jqplugins/autocomplete/

var listings = [
{id:1, title:"State: Missouri", mlsID:0, listingID:0, communityID:0, builderID:0}, 
{id:2, title:"State: Kansas", mlsID:0, listingID:0, communityID:0, builderID:0}, 
{id:3, title:"MLS: #1521199, 15328 Rosewood Street, Leawood, KS 66224", mlsID:1521199, listingID:0, communityID:0, builderID:0}, 
{id:4, title:"MLS: #1685612, 102 Arapaho Trail, Lake Winnebago, MO 64034", mlsID:1685612, listingID:0, communityID:0, builderID:0}, 
{id:5, title:"MLS: #1703923, 417 SW Eagles Ridge Drive, Blue Springs, MO 64014", mlsID:1703923, listingID:0, communityID:0, builderID:0}, 
{id:6, title:"MLS: #1703944, 501 SW Eagles Ridge Drive, Blue Springs, MO 64014", mlsID:1703944, listingID:0, communityID:0, builderID:0}, 
{id:7, title:"MLS: #1703944, 501 SW Eagles Ridge Drive, Blue Springs, MO 64014", mlsID:1703944, listingID:0, communityID:0, builderID:0}, 
{id:8, title:"MLS: #1703945, 413 SW Eagles Ridge Drive, Blue Springs, MO 64014", mlsID:1703945, listingID:0, communityID:0, builderID:0}, 
{id:9, title:"MLS: #1711202, 2300 SW Pheasant Trail, Lee\'s Summit, MO 64082", mlsID:1711202, listingID:0, communityID:0, builderID:0}, 
{id:10, title:"MLS: #1715630, 9400 E 67th Street Terrace, Raytown, MO 64133", mlsID:1715630, listingID:0, communityID:0, builderID:0}, 
{id:11, title:"MLS: #1716158, 1403 Matthes Lane, Pleasant Hill, MO 64080", mlsID:1716158, listingID:0, communityID:0, builderID:0}, 
{id:12, title:"MLS: #1720525, 1309 Aspen Drive, Greenwood, MO 64034", mlsID:1720525, listingID:0, communityID:0, builderID:0}, 
{id:13, title:"MLS: #1724999, 417 SW Webster Drive, Blue Springs, MO 64014", mlsID:1724999, listingID:0, communityID:0, builderID:0}, 
{id:14, title:"MLS: #1726014, 9813 NW 87th Street, Kansas City, MO 64153", mlsID:1726014, listingID:0, communityID:0, builderID:0}, 
{id:15, title:"MLS: #1730086, 4829 Gull Point Drive, Lee\'s Summit, MO 64082", mlsID:1730086, listingID:0, communityID:0, builderID:0}, 
{id:16, title:"MLS: #1732828, 1025 SE Aa Highway, Blue Springs, MO 64014", mlsID:1732828, listingID:0, communityID:0, builderID:0}, 
{id:17, title:"MLS: #1732863, 1504 NE Woodland Shores Place, Lee\'s Summit, MO 64086", mlsID:1732863, listingID:0, communityID:0, builderID:0}, 
{id:18, title:"MLS: #1741387, 22807 NW Pink Hill Road, Blue Springs, MO 64015", mlsID:1741387, listingID:0, communityID:0, builderID:0}, 
{id:19, title:"MLS: #1745636, 1901 E 125th Street, Kansas City, MO 64146", mlsID:1745636, listingID:0, communityID:0, builderID:0}, 
{id:20, title:"MLS: #1752461, 4017 S Vassar Avenue, Independence, MO 64052", mlsID:1752461, listingID:0, communityID:0, builderID:0}, 
{id:21, title:"MLS: #1752851, 1401 NE Country Lane, Lee\'s Summit, MO 64086", mlsID:1752851, listingID:0, communityID:0, builderID:0}, 
{id:22, title:"MLS: #1755419, 917 SE 15th Street, Lee\'s Summit, MO 64081", mlsID:1755419, listingID:0, communityID:0, builderID:0}, 
{id:23, title:"MLS: #1761789, 1325 NE Country Lane, Lee\'s Summit, MO 64086", mlsID:1761789, listingID:0, communityID:0, builderID:0}, 
{id:24, title:"MLS: #1766243, 4316 S Main Street, Independence, MO 64055", mlsID:1766243, listingID:0, communityID:0, builderID:0}, 
{id:25, title:"MLS: #1767128, 3018 157th Street, Basehor, KS 66007", mlsID:1767128, listingID:0, communityID:0, builderID:0}, 
{id:26, title:"MLS: #1768540, 1712 Remington Street, Pleasant Hill, MO 64080", mlsID:1768540, listingID:0, communityID:0, builderID:0}, 
{id:27, title:"MLS: #1770096, 2500 SW Richwood Circle, Blue Springs, MO 64015", mlsID:1770096, listingID:0, communityID:0, builderID:0}, 
{id:28, title:"MLS: #1774099, 19519 W 110th Street, Olathe, KS 66061", mlsID:1774099, listingID:0, communityID:0, builderID:0}, 
{id:29, title:"MLS: #1780758, 309 SW Eagles Ridge Drive, Blue Springs, MO 64014", mlsID:1780758, listingID:0, communityID:0, builderID:0}, 
{id:30, title:"MLS: #1780767, 308 SW Newport Drive, Blue Springs, MO 64014", mlsID:1780767, listingID:0, communityID:0, builderID:0}, 
{id:31, title:"MLS: #1782014, 409 SW Eagles Ridge Drive, Blue Springs, MO 64014", mlsID:1782014, listingID:0, communityID:0, builderID:0}, 
{id:32, title:"MLS: #1782054, 500 SW Newport Drive, Blue Springs, MO 64014", mlsID:1782054, listingID:0, communityID:0, builderID:0}, 
{id:33, title:"MLS: #1783538, 19409 W 110th Terrace, Olathe, KS 66061", mlsID:1783538, listingID:0, communityID:0, builderID:0}, 
{id:34, title:"MLS: #1796461, 28001 E Howard Drive, Lee\'s Summit, MO 64086", mlsID:1796461, listingID:0, communityID:0, builderID:0}, 
{id:35, title:"MLS: #1804430, 1320 NE Country Lane, Lee\'s Summit, MO 64086", mlsID:1804430, listingID:0, communityID:0, builderID:0}, 
{id:36, title:"MLS: #1804819, 405 SW Webster Drive, Blue Springs, MO 64014", mlsID:1804819, listingID:0, communityID:0, builderID:0}, 
{id:37, title:"MLS: #1804824, 404 SW Newport Drive, Blue Springs, MO 64014", mlsID:1804824, listingID:0, communityID:0, builderID:0}, 
{id:38, title:"MLS: #1805279, 12604 S Laci Circle, Lee\'s Summit, MO 64086", mlsID:1805279, listingID:0, communityID:0, builderID:0}, 
{id:39, title:"MLS: #1805989, 1500 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1805989, listingID:0, communityID:0, builderID:0}, 
{id:40, title:"MLS: #1812741, 1321 NE Country Lane, Lee\'s Summit, MO 64086", mlsID:1812741, listingID:0, communityID:0, builderID:0}, 
{id:41, title:"MLS: #1817090, 9724 E 34th Street, Independence, MO 64052", mlsID:1817090, listingID:0, communityID:0, builderID:0}, 
{id:42, title:"MLS: #1818512, 116 N Jewell Street, Liberty, MO 64068", mlsID:1818512, listingID:0, communityID:0, builderID:0}, 
{id:43, title:"MLS: #1825792, 11028 S Barker Road, Olathe, KS 66061", mlsID:1825792, listingID:0, communityID:0, builderID:0}, 
{id:44, title:"MLS: #1830958, 1300 NE Ernest Way, Lee\'s Summit, MO 64086", mlsID:1830958, listingID:0, communityID:0, builderID:0}, 
{id:45, title:"MLS: #1834720, 10015 N Highland Place, Kansas City, MO 64155", mlsID:1834720, listingID:0, communityID:0, builderID:0}, 
{id:46, title:"MLS: #1835409, 12602 S Laci Circle, Lee\'s Summit, MO 64086", mlsID:1835409, listingID:0, communityID:0, builderID:0}, 
{id:47, title:"MLS: #1839131, 7445 Monrovia Street, Shawnee, KS 66216", mlsID:1839131, listingID:0, communityID:0, builderID:0}, 
{id:48, title:"MLS: #1841025, 505 SW Seagull Street, Lee\'s Summit, MO 64082", mlsID:1841025, listingID:0, communityID:0, builderID:0}, 
{id:49, title:"MLS: #1842081, 835 SW 35th Terrace, Lee\'s Summit, MO 64082", mlsID:1842081, listingID:0, communityID:0, builderID:0}, 
{id:50, title:"MLS: #1842142, 626 SE Joel Avenue, Lee\'s Summit, MO 64063", mlsID:1842142, listingID:0, communityID:0, builderID:0}, 
{id:51, title:"MLS: #1842684, 1204 NE Green Street, Lee\'s Summit, MO 64086", mlsID:1842684, listingID:0, communityID:0, builderID:0}, 
{id:52, title:"MLS: #1847596, 16521 E George Franklin Drive, Independence, MO 64055", mlsID:1847596, listingID:0, communityID:0, builderID:0}, 
{id:53, title:"MLS: #1848126, 19505 W 110th Street, Olathe, KS 66061", mlsID:1848126, listingID:0, communityID:0, builderID:0}, 
{id:54, title:"MLS: #1848741, 19475 W 110th Terrace, Olathe, KS 66061", mlsID:1848741, listingID:0, communityID:0, builderID:0}, 
{id:55, title:"MLS: #1848830, 7111 SE Downing Street, Holt, MO 64048", mlsID:1848830, listingID:0, communityID:0, builderID:0}, 
{id:56, title:"MLS: #1856335, 8405 Elm Avenue, Raytown, MO 64138", mlsID:1856335, listingID:0, communityID:0, builderID:0}, 
{id:57, title:"MLS: #1860670, 12510 S Fox Den N/a, Lee\'s Summit, MO 64086", mlsID:1860670, listingID:0, communityID:0, builderID:0}, 
{id:58, title:"MLS: #1861589, 1220 Kingsland Circle, Raymore, MO 64083", mlsID:1861589, listingID:0, communityID:0, builderID:0}, 
{id:59, title:"MLS: #1861806, 1313 NE Ernest Way, Lee\'s Summit, MO 64086", mlsID:1861806, listingID:0, communityID:0, builderID:0}, 
{id:60, title:"MLS: #1868010, 124 SW Moore Street, Blue Springs, MO 64014", mlsID:1868010, listingID:0, communityID:0, builderID:0}, 
{id:61, title:"MLS: #1869270, 11512 Riley Street, Overland Park, KS 66210", mlsID:1869270, listingID:0, communityID:0, builderID:0}, 
{id:62, title:"MLS: #1873784, 7501 N Berkley Avenue, Kansas City, MO 64152", mlsID:1873784, listingID:0, communityID:0, builderID:0}, 
{id:63, title:"MLS: #1874993, 720 SW 33rd Street, Lee\'s Summit, MO 64082", mlsID:1874993, listingID:0, communityID:0, builderID:0}, 
{id:64, title:"MLS: #1875043, 627 E 60 Street, Kansas City, MO 64110", mlsID:1875043, listingID:0, communityID:0, builderID:0}, 
{id:65, title:"MLS: #1875050, 1600 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1875050, listingID:0, communityID:0, builderID:0}, 
{id:66, title:"MLS: #1875774, 3322 SW Regatta Drive, Lee\'s Summit, MO 64082", mlsID:1875774, listingID:0, communityID:0, builderID:0}, 
{id:67, title:"MLS: #1876199, 509 SE Sherri Lane, Blue Springs, MO 64014", mlsID:1876199, listingID:0, communityID:0, builderID:0}, 
{id:68, title:"MLS: #1879108, 4904 Casey Court, Independence, MO 64055", mlsID:1879108, listingID:0, communityID:0, builderID:0}, 
{id:69, title:"MLS: #1879720, 1625 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1879720, listingID:0, communityID:0, builderID:0}, 
{id:70, title:"MLS: #1881243, 7501 N Palmer Avenue, Kansas City, MO 64158", mlsID:1881243, listingID:0, communityID:0, builderID:0}, 
{id:71, title:"MLS: #1883053, 335 NW Weschester Drive, Blue Springs, MO 64014", mlsID:1883053, listingID:0, communityID:0, builderID:0}, 
{id:72, title:"MLS: #1883930, 10709 E 84th Terrace, Raytown, MO 64138", mlsID:1883930, listingID:0, communityID:0, builderID:0}, 
{id:73, title:"MLS: #1886882, 1312 NE Ernest Way, Lee\'s Summit, MO 64086", mlsID:1886882, listingID:0, communityID:0, builderID:0}, 
{id:74, title:"MLS: #1886892, 1316 NE Country Lane, Lee\'s Summit, MO 64086", mlsID:1886892, listingID:0, communityID:0, builderID:0}, 
{id:75, title:"MLS: #1888678, 1525 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1888678, listingID:0, communityID:0, builderID:0}, 
{id:76, title:"MLS: #1888686, 1605 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1888686, listingID:0, communityID:0, builderID:0}, 
{id:77, title:"MLS: #1892276, 1533 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1892276, listingID:0, communityID:0, builderID:0}, 
{id:78, title:"MLS: #1895581, 1528 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1895581, listingID:0, communityID:0, builderID:0}, 
{id:79, title:"MLS: #1895591, 1616 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1895591, listingID:0, communityID:0, builderID:0}, 
{id:80, title:"MLS: #1895730, 1612 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1895730, listingID:0, communityID:0, builderID:0}, 
{id:81, title:"MLS: #1895737, 1624 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1895737, listingID:0, communityID:0, builderID:0}, 
{id:82, title:"MLS: #1895757, 1620 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1895757, listingID:0, communityID:0, builderID:0}, 
{id:83, title:"MLS: #1898637, 1616 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1898637, listingID:0, communityID:0, builderID:0}, 
{id:84, title:"MLS: #1904361, 1224 Kingsland Circle, Raymore, MO 64083", mlsID:1904361, listingID:0, communityID:0, builderID:0}, 
{id:85, title:"MLS: #1911085, 321 NW Rockhill Circle, Lee\'s Summit, MO 64081", mlsID:1911085, listingID:0, communityID:0, builderID:0}, 
{id:86, title:"MLS: #1913051, 1548 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1913051, listingID:0, communityID:0, builderID:0}, 
{id:87, title:"MLS: #1918393, 1532 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1918393, listingID:0, communityID:0, builderID:0}, 
{id:88, title:"MLS: #1918401, 1604 SW 41st Street, Lee\'s Summit, MO 64082", mlsID:1918401, listingID:0, communityID:0, builderID:0}, 
{id:89, title:"MLS: #1918406, 1604 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1918406, listingID:0, communityID:0, builderID:0}, 
{id:90, title:"MLS: #1918415, 4108 SW Stoney Brook Drive, Lee\'s Summit, MO 64082", mlsID:1918415, listingID:0, communityID:0, builderID:0}, 
{id:91, title:"MLS: #1919206, 811 SW 35th Terrace, Lee\'s Summit, MO 64082", mlsID:1919206, listingID:0, communityID:0, builderID:0}, 
{id:92, title:"MLS: #1934517, 5901 N Bedford Avenue, Kansas City, MO 64151", mlsID:1934517, listingID:0, communityID:0, builderID:0}, 
{id:93, title:"MLS: #1937965, 1609 SW Whistle Drive, Lee\'s Summit, MO 64082", mlsID:1937965, listingID:0, communityID:0, builderID:0}, 
{id:94, title:"MLS: #1940598, 909 NE Wildflower Drive, Lee\'s Summit, MO 64064", mlsID:1940598, listingID:0, communityID:0, builderID:0}, 
{id:95, title:"MLS: #1943248, 408 Millview Drive, Buckner, MO 64016", mlsID:1943248, listingID:0, communityID:0, builderID:0}, 
{id:96, title:"MLS: #1943972, 15516 Howe Street, Overland Park, KS 66224", mlsID:1943972, listingID:0, communityID:0, builderID:0}, 
{id:97, title:"MLS: #1946451, 4221 E 54th Street, Kansas City, MO 64130", mlsID:1946451, listingID:0, communityID:0, builderID:0}, 
{id:98, title:"MLS: #1948752, 12700 S Laci Circle, Lee\'s Summit, MO 64034", mlsID:1948752, listingID:0, communityID:0, builderID:0}, 
{id:99, title:"MLS: #1951402, 12065 S Troost Street, Olathe, KS 66061", mlsID:1951402, listingID:0, communityID:0, builderID:0}, 
{id:100, title:"MLS: #1951820, 12030 E 86th Street, Kansas City, MO 64138", mlsID:1951820, listingID:0, communityID:0, builderID:0}];
   
/*             
$(document).ready(function(){
  $("input#location").autocomplete({
    source: [listings]
  }).on('selected.xdsoft',function(e,datum){
  //alert(datum.id);
  //alert(datum.title);
  }); 
});
*/

$(document).ready(function(){
  $("input#location").autocomplete({
    source: [{ 
      data:     listings,
      getTitle: function(item){ return item['title'] },
      getValue: function(item){ return item['title'] }
    }]
  }).on('selected.xdsoft',function(e,datum){
    $("#mlsID").val("datum.mlsID");
    $("#listingID").val("datum.listingID");
    $("#communityID").val("datum.communityID");
    $("#builderID").val("datum.builderID");
  }); 
});

</script>

Init before css is loaded

If we load css and js dynamically, plugin sometimes init before css is loaded. If you can, fix this, please (ex.: check some unique css rule in timer loop)

Its Automaticly Selecting The First Item Value

I'm using
$('#homeInput').on('selected.xdsoft', function(event, item){
$(this).val(selected.xdsoft.item.value);
$("#searchform").submit();
});
Its working fine but the problem is even if user doesn't select any suggestion and press enter its automatically selecting the first suggestion item value :(

jquery autocomplete values got disappear on mouse hover or on use of down arrow key

Hello team,
I am using below code for jquery autocomplete. But all jquery autocomplete values gets disappear on mouse hover or when i use down arrow key to select value. Could you please provide the solution for this.

In formview.ascx File :

<asp:TextBox ID="txtRootCause" runat="server" MaxLength="50" CssClass="txtboxForAutocomplete" Width="400px">/asp:TextBox

<script> var appid = $("#ITRP_UC_ClientLogout1_ddlApplicationList option:selected").val(); var prefixText = $("#<% =txtRootCause.ClientID%>").val(); $("#<% =txtRootCause.ClientID%>").autocomplete({ appendTo: '#autoCompleteRootCause', source: function (request, response) { if (request.term.length < 3) { return false; } $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "WFHome.aspx/GetRootCauseList", data: "{ prefixText:'" + request.term + "',count:'3', contextKey: '" + $("#ITRP_UC_ClientLogout1_ddlApplicationList option:selected").val() + "' }", dataType: "json", success: function (output) { response(output.d); }, error: function (errormsg) { alert(errormsg.responseText); } }) } }); </script>

I have tried by using below funtion in the code, but is is not working for me. Also i tried by keeping autoFocus : false directly, but that also not worked.

focus: function ( e, ui ) {
if ( e.keyCode === undefined ) {
return false;
}

One more thing. i am also facing in CSS Style of textbox dropdown values, the outline of box is not appearing. I am using below code in Style.css File :

.txtboxForAutocomplete {
width: 260px;
border: 1px solid #9c9c9c;
background-color: #f9f9f9;
padding: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #3d3d3d;
font-size: 12px;
text-align: left;
margin-top:3px;
}

Please help me on above issue. Any suggestion is appreciable.

please set the tabindex of the readonly input to -1

You create a <input readonly="" class="xdsoft_autocomplete_hint" style="animation: no... to work with. but you forgot to set the tabindex of this input to -1. so if you press [TAB] inside the visible input you focus the readonly input and so the focus is "lost". if you press the [TAB] once again the next input in the form gets the focus.
if you set the tabindex=-1 like so: <input tabindex=-1 readonly="" class="xdsoft_autocomplete_hint"... then [TAB] works like expected...

getValueFromItem

In your example page you make use of getValueFromItem but i can not find any documentation or even instance of the function in your source code. What does it do?

Delay option

How to set delay option?
Currently for every character it is calling the rest api.
I want to set delay option to reduce the api calls, but how?

How to set default value?

Let say the input that has autocompleteJs will dynamically change the value. e.g. $("input").val("test");
How can I trigger autocompleteJs to show result based on the new value of the input?

Unable to edit in the middle of the text

Hello,

I found a bug where if you try to edit in the middle of the text, it moves the cursor to the end. Example: Start with "North Dakota" and change "North" to "South".

Tiny code removal of unecessary style setting

Hello.
At lines 999-1003, there is a try/catch portion of code that sets a transparent background. It overwrites the CSS classes from the CSS files, and so creates an unwanted rendering. This code seems to have no technical purpose, is it really necessary ? If not, can you remove it ?
Thank you.

arrays of object from server side

I'm using your plugmin and its awesome. but only one thing i need to ask. How do i bind arrays of objects from server to the dropdown? For example, if i type "p" means, i will get 30 records from server whick looks like

[{
     _id: 12345,
    name: prank,
    city: India
}, {
    _id:67890,
    name: pink,
    city: India
}, {
   .......
}, and so on..........]

How do i display only name field in autocomplete box? @butschster @xdan

Could you make a new release ?

Actually bower components get only 1.2.2 version (November 2014). (without the last fixes).
Could you make a new release ?

Thanks, and great work :)

License

Could you please add information about the plugin license? Is it MIT?

Multiple (and dynamically added) autocomplete fields?

Thanks for an awesome plugin!

I have a form, where user can dynamically add new fields and group of fields. For better understanding, here is the screenshot of UI:

screen shot 2015-06-07 at 1 13 39 pm

If user clicks the blueish "Add more" button, the group of fields gets cloned and user can add more values.

Everything works for me this way - even another of your awesome plugins, xdan/datetimepicker - but Autocomplete does not. Here is my configuration script:

jQuery(function($) {

    'use strict';

    function init($autocomplete) {

        var config  = $.parseJSON($autocomplete.attr('data-autocomplete'));

        $autocomplete.autocomplete(config);


    }

    $(document).on('ready cibulka/clone', function() {

        var $autocompletes = $('.cibm-input--autocomplete');

        $autocompletes.each(function() {

            var $autocomplete = $(this);
            init($autocomplete);

        });


    });

});

cibulka/clone is my custom event that gets triggered whenever user adds or removes field (or group of fields).

First autocomplete field always works (as shown in the screenshot), any other one does not. Firebug shows, that div.xdsoft_autocomplete gets printed below the field, but nothing is popping out when you type anything to the input.

Is it possible to make it work somehow? Or is my configuration flawed? Thank you in advance!

Reload plugin (dynamic url)

Hello again.
The plugin has been running smoothly, especially after the option to be added accents (thanks again @xdan xdan).

I'm trying to use the following code:

$('#state').on('change', function() {
    var citiesList = '/cities/list/' + this.value;

    $("#city").autocomplete({
        sources:[{
            url:citiesList,
            type:'remote'
        }],
        limit: 10
    });
});

But unfortunately only works the first time that the change event is called, I believe it would be necessary to reload the plugin, but did not see any method to do that. Taking a look at the plugin until I found some things related to destroy and update, but did not quite understand what to be or how it is used.

Is there a way to reload the plugin or some other way to implement this code?

Thank you.

kite autocomplete hover over problem

Screenshot (516)

It used to show a small description of the items over which I hover the cursor. But now, it shows like this. Does anyone know how to solve it?

Remote Data not working

Hey There,

My PHP is outputting the JSON data as below. But I dont see it working. Can you help me resolving this please...

[{"title":"Caterers"},{"title":"Decorators"},{"title":"Venue"},{"title":"Invitations"},{"title":"Photographers"},{"title":"Entertainment"},{"title":"Wedding Apparel"},{"title":"Travel"},{"title":"Accomodation"},{"title":"Event Planners"},{"title":"Beauty"},{"title":"Gifting"},{"title":"Jewellery"},{"title":"Nitty Gritty"}]

$('#remote_input').autocomplete({
valueKey:'title',
minLength: 2,
visibleLimit: 5,
source:[{
url:"test.php?s=%QUERY%",
type:'remote',
getValueFromItem:function(item){
return item.title
},
ajax:{
dataType : 'jsonp'
}
}]});

Width trouble

I have some troubles with your plugin (not correct width for .xdsoft_autocomplete) when input have paddings and margins. Short fix is:

~158, ~628 lines:

$box.css({
    'display':$input.css('display'),
    'width':$input.css('width')
});

change to

$box.css({
    'display':$input.css('display'),
    'width':'auto'
});

Starts with

How can I get result letter starts with. I am using the below code.

$('#auto1').autocomplete({
source:[states]
});

I set usernane = array,and use data:username,but it didn,t work.

var usernames =[
{id:1, usernme:"alabama"},
{id:2, usernme:"alaska"},
{id:3, usernme:"georgia"},
{id:4, usernme:"texas"},
{id:6, usernme:"california"}];

$('#approver').autocomplete({
source:[{
data:usernames,
getTitle:function(item){
return item['username']
},
getValue:function(item){
return item['username']
}
}]}).on('selected.xdsoft',function(e,datum){
alert(datum.id);
alert(datum.username);
});

i input and show [object object]
why?

Is there any method to reset the search result?

After I invoke $('#some-input').val(''), when I focus in the input again, the value before is still in, and result is filtered with the value.

So I wonder is there a method like .autocomplate('reset') to clear the field and result?

CSS question

Great plugin. I'm using it in my probject.

However, how to remove "display: block" from

<div class="xdsoft_autocomplete" style="display: block; width: 500px;">

it automatically adds "display: block", I need it to be "display: inline-block"

http://i.imgur.com/36qidr4.gif

Thank you.

Styling the hint

Hi and thank you for your work in this plugin!

I would like to ask you regarding the styling of this:

I type Al and the textbox automatically shows the rest of the word Al(abama).

Is there a way to style the (abama) portion of the word? Background color for example.

Thank you again.

two or more invisible autocomplete control in a page would not work properly

I have a sub-page load dynamically, every time after complete load the sub-page I would init two invisble autocomplete controls.
But when the two autocomplete controls is visible, only one of the interval_for_visibility timer would be clear, the other one would run forever. This would cause one of the autocomplete $hint can not position properly in the sub-page.

Here is my fixed code snippet, I hope xdan fixed this issue in source code. O(∩_∩)O~

` var ticks = [];
// should put timer in array if more than one invisible autocomplete inited in one page

interval_for_visibility = setInterval(function () {
if ($input.is(':visible')) {
$input
.trigger('updateHelperPosition.xdsoft');
// clear all the interval ticks
for(var i=0; i<ticks.length; i++){
clearInterval(ticks[i]);
}
//clearInterval(interval_for_visibility);
}
},100);
ticks.push(interval_for_visibility);`

Double results when using custom function for source

The issue: https://gyazo.com/3145ecbb6024b10ea40e3b2892a6ec27

What i use : Ajax custom function for source
Version : 1.2.8 latest
Jquery : 3.* latest
Bootstrap : 4.1 latest
The problem :
When using the custom function for source, the add function add the new results but does not remove the previous results from the previous search.
Code :

     $(`input[name="location[customer_id]"]`).autocomplete({
            source:[ function( q,add ){
                $.getJSON(url+`?s=${encodeURIComponent(q)}`,function(resp){
                    add(resp);
                });
           }],
           valueKey : 'name',
           titleKey : 'name'
      }).on('selected.xdsoft',function(e,item){
           $(`input[name="location[customer]"]`).val(item.encrypted);
      });

I think the add() function adds new records but does not remove the old results from the previous search. Is there like a remove function or empty function to remove all the previous results?

Documentation is wrong for filtering objects

The example to filter through an array of objects is wrong. I spent an hour to search how to make it work.

From your site:

$('#auto1').autocomplete({source:[{
 data:[
  {id:1, title:"alabama"},
  {id:2, title:"alaska"},
  {id:3, title:"georgia"},
  {id:4, title:"texas"},
  {id:6, title:"california"}
 ],
 getTitle:function(item){
  return item['title']
 },
 getValue:function(item){
  return item['title']
 },
}]})

That doesn't work. The proper way I found is :

$('#auto1').autocomplete(
  {
    source:[{
      data:[
      {id:1, title:"alabama"},
      {id:2, title:"alaska"},
      {id:3, title:"georgia"},
      {id:4, title:"texas"},
      {id:6, title:"california"}
    ],
    valueKey: 'title'
}]});

IE9 out of stack space

I get this error in IE9 console while typing in the search field:

SCRIPT28: Out of stack space

When clicking for more details it takes me to toggleDetails() function.

Accents

First thanks for the plugin, is by far the best that worked for me so far.

The only problem I have with it is faced with the accents, unfortunately it fails to autocomplete words with accents. Is there any way to fix this?

Thank you.

Case sensitivity

This is a case-sensitive plugin, it will show hints according to what you're typing (upper or lower case). Would be nice if it was case-insensitive.

Transparency in Internet Explorer

in v1.2.6 the code on lines 1006-1010 attempts to set the background of the textbox to transparent. This value does not appear to be supported in IE and results in the background getting set to white. This is fine if your control is hosted on a white background, but looks terrible on any other color.

try{
	$input[0].style.setProperty('background', 'transparent', 'important');
} catch(e) {
	$input.css('background','transparent')
}

Commenting out these lines of code appears to resolve the issue and works fine in IE and Chrome.

jquery.autocomplete.js with version tag 1.2.6

Hi, I'm going to host this lib on cdnjs.

I think the file jquery.autocomplete.js is the latest version.
But line 662 of the jquery.autocomplete.js with the tag 1.2.6 is different from the file in the master.
Because I need to add git auto-update config.

Can you update it?
Thanks for your help.
cdnjs/cdnjs#7626

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.