xcash / bootstrap-autocomplete Goto Github PK

Just testing out a basic install, the script gets my results absolutely fine looking at the network requests and results but the results aren't loading in a dropdown. Screenshot below of the JS error message:

I'd like to prevent Submitted Form
When items show up, and i select it with an Enter. The Form was submitted, i hope this wouldn't be happen in my case.
I need Enter for select the item, but don't submit the form.

i'am sorry for my english.
Terima Kasih

I am using django. I have to edit a value. I have created an update form.

to initialize a single form i do:

$('.basicAutoComplete').autoComplete('set', { value: 10, text: "nice" });

But how to do when i have a form with multiple data like I have a form to update 10 names at a time etc.

Is your feature request related to a problem? Please describe.
When you type it send a request for each character typed. It cancels the previous request, but the request is handled by server which results in unnecessary load.

Describe the solution you'd like
I great feature would have an option to define a delay (in milliseconds ?) before the ajax request is executed after last character typed.

Describe the bug
In the documentation, https://bootstrap-autocomplete.readthedocs.io/en/latest/ under the Configuration Options section the example code shows:

Returns: | An object { id: myItemId, text: myfancyText, html?: myfancierHtml }.

Is the question mark after the html key a typo or intentional? I assumed it was a typo and my code seems to work with out it.

Screenshots

I just discovered this yesterday and it works great and is very easy to use (that last bit is perfect for me :-) ).

But i was wondering if it was possible to add a header row to the search result. My results are formatted in rows with 4 columns, which works great with the formatResult option. But i would like to add titles to the columns. In my case, two columns contain dates and i would be nice if i could show what those dates stand for.

Second thing. I select a value from the results. I put focus on the input. If the input loses focus, the autocomplete.select fucntion is executed. The same happens when focus on input and i minimize-maximize the window. When using Developer Tools, the autocomplete.select fucntion is executed each time i click on something in the Developer Tools section.
When a vlaue is selected and i put focus on the input, the search is resubmitted

I am having a form with initial value. If i type and later want to cancel and retain the initial value, how to do it.

The code is building and is working. Some typescript linting errors remains on console after updating the buiding environment.
Need to figure out why..

Tried using it for a MVC application.

It works great! Excellent product.

But it fails when compiled and minimized because of the webpack issue.

Hello, after selecting an item from the dropdown i disable the input field and add an X icon on the right that should clear and enable the field. I've tried the following solutions but none of them seem to work

$('#input').autoComplete('set', { value: null, text: null });
$('#input').autoComplete('set', { value: '', text: '' });

$('#input').val('');
this one clears the field but not the value since i can submit the form without errors

Any idea on how to solve it?

Similar to the "Autoselect when only 1 item" feature request, I'd like the first item in the list to always be automatically "highlighted" when updating the search query, so the user can just type and hit enter when he's happy with the first match, without having to use the down-arrow.

How can I accomplish that?

Hi.
I`m trying to perform new action after when new autocomplete value was founded and selected inside dropdown. Like to open a new page.
I guess I need to customize dropdown template to set href attr to dropdown entrie.

Also, you have typo in doc:

formatResult
        callback(item)
             Returns:	
                An object { id: myItemId, text: myfancyText, html**?**: myfancierHtml }.

Is your feature request related to a problem? Please describe.
Bootstrap 4. I have autocompete on a field such as company name. The purpose of the field is to show already entered names in case they match but ALSO to allow entering a brand new name. Assume the name "XYZ" is not in the system, then upon typing "XYZ" the autocomplete shows the drop down with the no results text.

Describe the solution you'd like
I want an option to not show the drop down if there are no results. For entering a new name the dropdown is unnecessary and confusing. So as you type, it should show matching values (if there are any), and as you type more if there are no matching values then the dropdown should disappear entirely.

Describe alternatives you've considered
I set noResultsText: '' but it still shows a blank drop down.

Additional context

When customizing resolvers at events.search is useful to have access to the DOM element containing the autocomplete in order to get data-* values or other attributes.

Describe the bug
I wrote 2 event handlers for my autocomplete field using the provided custom events.
The autocomplete.freevalue event handler works as expected. But once I selected a value from the auto complete result list the freevalue event doesn't seem to trigger anymore.

To Reproduce
Steps to reproduce the behavior:

1. Goto to the examples&demo page https://raw.githack.com/xcash/bootstrap-autocomplete/master/dist/latest/index4.html
2. scroll to the bottom events search field
3. search for "abc" (or any other value) and tab out (or click somewhere out of the input box)
4. the log correctly lists the "freevalue" event. repeat step 3 any number of times. the "freevalue" event always triggers correctly.
5. search for "abc" and select any of the results (for example "Docker")
6. Now if you repeat step 3 again you no longer trigger the "freevalue" event.

Expected behavior
The "freevalue" event should instead still trigger as before.

Desktop (please complete the following information):

• Browser Chrome and Firefox

I'm looking for a way to report errors from the search query request.

I think this would be best added to the resolver settings and executed when an error of the xhr occurs.

I have a form with two inputs and and I am passing the contents of both to the script, but the JS is not updating the url, (I included the Date.now() for debugging purposes.

$(function () {

  $("#contact").on("focusin change paste keyup", function() {
	$('.contactAutoComplete').autoComplete({
		minLength: 0,
		resolverSettings: {
			url: 'client.php',
			extraData: {'company': document.getElementById('company').value + Date.now() }
		}
	});
  });

});

Many Thanks

Hello, and thanks for the great work on the plug-in. I'm trying to get autoComplete to trigger on paste. The following seems to work fine when pasting from the keyboard, but not from a context menu (right click, paste) or "paste" on iphone. However, the pasted content is always recognized (i.e. alert or console log will show what's pasted via any approach).

$('#AutoComplete').on('paste', function() {
        setTimeout(function() {
		var stuff = $('#AutoComplete').val();
		//alert('pasted = ' + stuff);
            	$('#AutoComplete').autoComplete('search', stuff);
	},0);
});

Thanks for any insight.

using Latest version: 2.1.1 (2019/03/06)
Chome console shows this error on pressing ENTER on selected item below INPUT field:

Uncaught TypeError: Cannot read property 'find' of undefined
at DropdownV4.get [as isItemFocused] (dropdown.ts:288)
at HTMLInputElement.eval (main.ts:179)
at HTMLInputElement.dispatch (jquery-3.3.1.js:5183)
at HTMLInputElement.elemData.handle (jquery-3.3.1.js:4991)

dropdown.ts:288 is meant to be:

if (this._dd.find('.dropdown-item.active').length > 0) {

Bug
The bootstrap version detection via getBootstrapVersion() does not work if the button.js file is not loaded, which can happen for customized (stripped down) bootstrap packages.

To Reproduce
Steps to reproduce the behavior:

1. Create a customized bootstrap package without button.js
2. Bootstrap-autocomplete initialization fails in https://github.com/xcash/bootstrap-autocomplete/blob/v2.3.0/src/main.ts#L122 because $.fn.button.Constructor is not defined

Expected behavior
Bootstrap version detection should work without assumption of the available components.

Additional context / Solution idea
I assume that there's no other way to retrieve the version than to check a specific component for it.

A solution could be to loop through several/all components until one is defined and the version can be accessed. If there's nothing found maybe set a default value.

In addition an option to set/override the bootstrap version when initializing the plugin would be quite handy, then the dynamic detection could be skipped.

I am able to show the list of matched items in the drop down box. But when the matched elements are long how to show them like a scroll view.

As per the screenshot, I'm trying to show the drop down when the user clicks the right "search" button

hi and thanks for this

is there an npm package for this? if not, will there be one ever?

Is your feature request related to a problem? Please describe.
I found the need to hook to an event when the dropdown is open and/or closed. E.g. I want to add a class to the parent element in order to update some styling.

Describe the solution you'd like
Add events for when the dropdown is opened and closed.

How to reproduce:
Search for something. Click (not press tab) on one of the results. The browser jumps to the top of the page. This is probably due to anchor (#) behaviour?

Can be reproduced in Chrome and Firefox.

I have a form with select. I am using Django. I am editing existing values. I want the select with a preselected option. HOw to do this

I have also tried this to set the initial value: But its still blank

    $('.basicAutoComplete').autoComplete(
        {minLength: 1},'set',{'value':1,'text':'sample'}
    );

On a click on item, the change event do not reflect the choice in val()

this code return empty string : $('input[name="city"]').val()
this one $('#city option:selected').val() return 'undefined'
this one : $('#city').val() return the text that was typed in input.

All goes well when hitting enter key
Any help much appreciated
Best regards

I have a long list in my json. When I start typing in, the long list of all the options pops up. Most of the options displayed of course do not match the characters from input.

Is it possible in the current version to set it up (without much work ;) ) in that way that only those options that are already matching the characters are displayed ? If not - could it be added in the future releases ?

Please let me know if my description is not clear enough.

Is there any way to preload some items in the dropdown, and when none of the preloaded items match the user choice he can type and then use autocomplete ?

Hello,
In my project I have changed dropdowns in order to have a limited width and height and then show scrollbars when the content overflows.

When I use the autocomplete (and so a dropdown appears) inside a modal I have an issue when i try to click on the scrollbars inside a modal because the dropdown disappears.

You can see the issue here:

https://raw.githack.com/valepu/bootstrap-autocomplete/master/dist/latest/index4.html

I have changed the dropdown size in order to show scrollbars. When I use the simple autocomplete I can use the scrollbars without any problem, but when i open the modal and try to scroll by clicking on the scrollbars it disappears.

I reckon this is more of a bootstrap issue because the modal steals the focus (as seen here: select2/select2#600 ) but is there some way to solve the issue directly from the autocomplet?

Describe the bug
Hello,
I have noticed that by using this library the select does not fire on select event when user clicks on one of the items in the menu.
To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://raw.githack.com/xcash/bootstrap-autocomplete/master/dist/latest/index.html#!'
2. Enable fire fox's development console and enable responsive view and select iphone. make sure that the enable touch screen simulation is on
3. try to work with any of the search boxes.
4. See error

Expected behavior
when user clicks on an item it should be selected in the menu and its related event fires.
Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: ios, windows
• Browser chrome, safari
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
the same thing happens on actual ios devices as well. it does not happen to android devices

Thank you for this control. I noticed that the width of the search result dropdown was limited, and I needed to allow the user to see the complete results, so I removed the width setting. You may want to add this as an option.

Original:
this.dd.css({ top: pos.top + this.$el.outerHeight(), left: pos.left, width: this._$el.outerWidth() });

With Removed Width Setting:
this.dd.css({ top: pos.top + this.$el.outerHeight(), left: pos.left });

The script works great but when mod_rewrite is on, after selecting an item from the list, the script submits the form by default, redirecting to the next page. It is quite tricky to set preventDefault on the form:

$('.item').autoComplete({	
	resolver: 'custom',
	formatResult: function (item) {
		return {
			value: item.id,
			text:  item.desc + " [" + item.name + "] "
		};
	},
	select: function(e){
		e.preventDefault();
	}
	events: {
		search: function (qry, callback, origJQElement) {
			$.ajax({
				 type: "POST",
				 url: "search.php",
				 data: { 'qry': qry},
				 dataType: "json"
			}).done(function (res) {
				callback(res.results);
			});
			
		}
	},
}); 

Describe the bug
When using bootstrap-autocomplete in flask.

To Reproduce
Steps to reproduce the behavior:
Using Scripts:

Expected behavior
Should be able to view data on browser.

Screenshots

Desktop (please complete the following information):

• OS: Centos 7
• Browser chrome, firefox

First, I love this plugin, thank you! It's working great for me, except I haven't been able to figure out how to capture the selected item in the list of autocomplete suggestions for form submission. I'm using Bootstrap 4.1 and jQuery 3.3.1. Here's a fiddle:

https://jsfiddle.net/chrisbartley/t192eb6r/19/

If you start typing "goo" in the input, you'll get the 4 autocomplete suggestions. Then hit the down arrow to select any of the items in the popup, then hit RETURN to select it and submit the form. But, as you see in the window that opens, the form submits to https://example.com/?q=goo. How do I get it to submit the selected item in the popup menu instead of only what was actually typed ("goo" in this case)?

Perhaps more to the point, I'm not aware of an event I can listen for which would allow me to determine selected autocomplete item. Does one exist?

If a person types enough to resolve to just one item, it should be automatically selected so that pressing enter key will choose that item.

Hi
Currently looks like the default length of characters for triggering an event is 3. I wonder if it can be changed
Thanks

Is your feature request related to a problem? Please describe.
The documentation states that the parameter used to do the search is q, but there does not seem to be a way to configure that. E.g. if you don't have control on the server-side code and it requires another parameter name.

Describe the solution you'd like
Add an option to overwrite the parameter name when initialising the component.

Describe alternatives you've considered
Changing the backend code.

Demo page at "https://gitcdn.link/cdn/xcash/bootstrap-autocomplete/1c73df45ff7f6844a833ee96ebd54d1a6bc027f6/dist/latest/index.html" is not working

a way to update position of the select menu.. i add stuff dynamically and this increases page size length, the dropdown menu seems not to stick under the input when this happens

when i type in the select input it shows all the select items and bolds the matched text. I have to scroll down and check which are the matched ones. Is it possible to show only matched select items.

As stated in #10 the automatic submit form event is fired before setting the new value in the field.
Need to check this out.

I see by default the links have !# in their HREF, how do I go about replacing that with the URL passed in the 'value' from my JSON results, for example:

[ {"value":"\/clients\/view\/216\/","text":"Studio 338"}, {"value":"\/clients\/view\/98\/","text":"Studio Juice"}, {"value":"\/clients\/view\/234\/","text":"Studio Moross"} ]

Here is the code before autocomplete is applied :

<select class="form-control postCodeAutoComplete" autocomplete="off" data-url="/api/Ajax/GetPostCode" placeholder="Code postal..." data-noresults-text="Pas de résultats" **data-val="true" data-val-required="The ID field is required."** id="PostalCode_ID" name="PostalCode.ID">
                 
                <option selected="selected" value="5030">31400</option>
</select>
                <span class="text-danger field-validation-valid" data-valmsg-for="PostalCode.ID" data-valmsg-replace="true"></span>
            </div>

and After autoComplete is applied 👍

   <input type="text" name="PostalCode.ID_text" id="PostalCode_ID" placeholder="Code postal..." autocomplete="off" class="form-control postCodeAutoComplete"><input type="hidden" name="PostalCode.ID" value="5030">
                <span class="text-danger field-validation-valid" data-valmsg-for="PostalCode.ID" data-valmsg-replace="true"></span>

Is there any way to copy all existing attributes to the newly created element, when convertToTextBox is called ?

Hi there!

Thank you so much for this module I am using with Django now! I used to use django-autocomplete-light, but too heavy to paremeter with a lot of third parties librairies to manage, with a lot of backend involved and yours is just SO simple to use!

I did not find a way to dynamically change the url to query, and I think it could be a good thing to allow users to do so.

My use case: user can select a platform, and then query games but only those related to that platform selected. Thus, I need to change the value of "platform_id" in my query url. To do this, I would like to read this value located in an <input> (for instance), and then change the url to query (for instance, it could go from /search-games?platform_id=13 to /search-games?platform_id=25.

But for now, the ugly thing I do in order to do that is the following:

<!-- in my template -->
<div id="choose-game">
    <select id="id_game" class="basicAutoComplete" data-url="..." data-noresults-text="">
</div>

var save_select = $("#choose-game").html() // we make a copy of original html code produced by django app
$('#choose-platform').on('change', function () {
    $('.basicAutoComplete').remove() // we delete present basicAutoComplete instance if exists...
    $("#choose-game").html(save_select) // ... we paste save of select...
    $('.basicAutoComplete').autoComplete({ // ... we initiate 
        resolverSettings: {
            extraData: { // here we give the good value for platform_pk, otherwise it would remain unchanged
                'platform_pk': $('input[name=gameStation]:checked').val()
            }
        }
    })
})

This is very ugly (even if it is 100% transparent for end user), thus I would like to find a clean way to do the same!

Thanks for reading, and keep up the good work 🔥

I'd like to see a demo of this, but the demo links in the readme point to localhost.

Describe the bug
This issue only occurs when loading/including jQuery UI (https://jqueryui.com/) on the same page as bootstrap-autocomplete. This likely is due to a conflict between the "autocomplete" function built into jQuery UI and the "Autocomplete" function in bootstrap-autocomplete. We are testing with jQuery UI v1.12.1 and bootstrap-autocomplete v2.2.1. When including both on the same page, the browser console displays two messages - one warning, and one error - and the expected "autocomplete" behavior fails for the associated text input. Here are examples of the two messages displayed in the browser console:

Warning: jQuery.Deferred exception: Cannot read property 'VERSION' of undefined TypeError: Cannot read property 'VERSION' of undefined

Error: Uncaught TypeError: Cannot read property 'VERSION' of undefined

This issue occurs whether jQuery UI is loaded from a local copy or via remote CDN.

To Reproduce
Steps to reproduce the behavior:

1. Include jQuery and jQuery UI (locally or via CDN)
2. Include bootstrap-autocomplete.min.js
3. Initialize/bind bootstrap-autocomplete to a text input control on the page, e.g. $("#headerSearch").autoComplete({INSERT PARAMETERS});
4. See warning and error messages in browser console (note that autocomplete will not function)

Expected behavior
As mentioned, this issue only occurs on pages with both jQuery UI and bootstrap-autocomplete included. On pages with only bootstrap-autocomplete, no such messages appear in the browser console, and autocomplete behaves as expected when bound to a text input control.

Screenshots

Environment/Versions

• OS: Windows 10 Pro
• Browser: Google Chrome v75.0.3770.100
• bootstrap-autocomplete v2.2.1
• jQuery UI v1.12.1

I'm making a demo app intended to compare two backend autocomplete algorithms against each other. So I want to type in one, then copy the input prefix to the other and then display the autocomplete dropdown for both at the same time.

But currently when one typeahead box has focus it will show results in the dropdown, but the other box will not unless I click it thereby closing the other dropdown.

Is there some property I can set to always show the dropdown provided the input contains some text?

Example (note dropdown active on left, but not on right):

On the page:
https://bootstrap-autocomplete.readthedocs.io/en/stable/

Te links:
"Demo page"
"Documentation"

lead to localhost so error page is shown.