jquery autocomplete doesn't display any result - javascript

the html code is way too long to copy and paste on stackoverflow so I'm just gonna link my site. If you go to the site, you will see the search bar above some designer names. basically I'm trying to implement autocomplete using jquery-ui plugin. and It doesn't show any result below the search bar. I've never used this plugin so I literally have no idea why this doesn't work.
I'm handling the autocomplete part in /js/autocomplete.js. There's not much code in it. data and adding to event listener. that's it.
let designers = [ .. ] // click to see whole data
$(function() {
$('#keyword').autocomplete({
source: designers,
minLength: 6
})
})
Any help would be appreciated :)

Actually when pressing on search input you have error in console which leading to this place in your code. That's why autocomplete doesn't work.
$(".m4").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

Try JQuery UI autocomplete (https://jqueryui.com/autocomplete/#default)

It does for me...
You've got minLength of 6 there meaning it won't search through the array until you've typed 6 characters, tried running the code with out the minLength parameter and worked as expected

Related

Is it possible to manually edit data after a dropdown auto-populates the field?

I am the opposite of a code monkey, so please forgive me if this is a simple solution. I have searched and searched and though I've found possible code examples, cannot find any information on how to fix the issue.
I've created a form-fillable PDF. I have fields that calculate based on inputs. I have a dropdown box that auto-populates some of the numbers (to add to the manual inputs). All of these work great!
I thought I would get fancy and further fill some of my data in the form. This is where the problems get funky.
I am setting the fields as shown, but those numbers can no longer be modified afterward.
this.getField("RanksPsy").value = psy;
this.getField("RanksBlade").value = blde;
this.getField("RanksBrawl").value = brwl;
this.getField("RanksCou").value = cou;
this.getField("RanksDip").value = dip;
I have buttons to increase/decrease the Ranks... fields, but the dropdown locks them and I'd like to avoid that if possible.
Is there another way to set those fields without using this.getField?
Thank you.
If I'm honest, I didn't understand the question well 😅
I don't recognize the getField function, so I decided to google it and found a RAD PDF documentation, so I'm assuming that's the library you're using to do this.
As that documentation states,
getFunction gets the first PDF form field object in the loaded
PdfWebControl document with a given name.
And this is the example provided, it may help.
var field = myApi.getField("Test Name");
if(field) {
//set its name to "New Name"
field.setProperties( {"name" : "New Name"} );
}
The solution to this is to put the script as an 'on blur' event rather than a keystroke event. It writes the data and then leaves it alone, which is exactly what I was looking for.

How to get protractor to click inside a search box?

I want to be able to click inside a search box which is on the page and then click submit and have a couple expect statements.
So far I have this:
it('should redirect to the correct page', function(){
browser.driver.findElement(by.id('header-search')).click();
browser.driver.findElement(by.id('header-search')).sendKeys("aaa");
//element.all(by.id('header-search')).sendKeys("tfgm");
expect(browser.getCurrentUrl()).toEqual("http://localhost:8080/web/customer/account");
});
When I run protractor all it does is click on the box but does not paste in the text. Anyone have any ideas about what is going wrong?
There is no need to click the search field before entering keys, you can do that directly.
If the user is supposed to click a submit button after entering their search terms, don't forget to make protractor click it:
it('should redirect to the correct page', function(){
element(by.id('header-search')).sendKeys('foo');
$('[type="submit"]').click();
//Expect-statements
});
I would suggest taking a look at Elementor(Elementor Github Repo Here) to help you figure out what elements to call.
When you get it installed, there is a bug(Link to issue) that currently is active, however it will still find your elements for you(gives you the by.id/by.css/by.buttonText) for you to plug into your tests.
Keep in mind that when you start Elementor, it will open a NEW instance of Chrome. You will need to duplicate the chrome tab before using the Elementor plugin(right click the tab> Duplicate).
As for your tests, you shouldn't NEED to click the search element. .sendKeys() will essentially "click" that element. The way to think of how sendKeys() works is it finds the element you specify, then will plug in the keys you state into that element.
I would suggest trying to change your statement to be:
this.headerSearch = by.id('headerSearch'); //Or any by.something element
it('should redirect to the correct page', function() {
element(this.headerSearch).sendKeys("aaa\n"); // the \n will represent the "enter key"
});
You could go even further to parameterize the test and separate out your statements to follow the Page Object test methodology a bit better by doing:
This set of code will be in a PO file named something like SearchPage.js(remember the file needs to be exported):
this.headerSearch = by.id('headerSearch');
this.setHeaderSearch = function(search) {
element(this.headerSearch).sendKeys(search);
};
This will be in your main test(it will need to import your SearchPage.js page object file):
it('should do something like input keys into element', function(){
searchPO.setHeaderSearch('send some keys\n'); // the \n will represent the "enter key"
expect(browser.getCurrentUrl()).toEqual("http://localhost:8080/web/customer/account");
});
If you could provide everyone the HTML of the element your testing, we could help you out better.
I hope this was somewhat helpful to you!
Which browser are you using with protractor? If you are using Firefox, this should be an issue. sendKeyscannot work on Firefox browser.

How do I interact with <select> and JavaScript - Display Form Results

Here is the jsbin.
http://jsbin.com/OnatOhE/3/ (just right click, view source to see source code)
I'm trying to display the results that the user chose on the same page after hitting the button. I've messed around with this for a while and I haven't found a simple way to do this.
All help is greatly appreciated. Thank you!
I'm sure if you look at any documentation for javascript libraries they would have an example of this but a very very simple way to do it could be like this using jQuery...
$( "#favColor" ).change(function() {
$("#bottomText").append(' '+$("#favColor option:selected").val());
});
You add to this by making a function that finds all select boxes and does the above to all of them, instead of having 5 functions that do the same thing.
See:
http://api.jquery.com/change/
http://api.jquery.com/val/

jQuery autocomplete doesn't send any request

I already created many autocomplete, and there has never been a problem.
This time, I tried to insert an autocomplete in an existing page (very complex and having many javascript calls)
My code is simple like that :
$('#named_invitees_0_user_id').autocomplete({
source: 'www.bidon.com'
});
I tried to :
Charge this javascript inside a $(document).ready() function
Not charge this javascript on page loading, then execute the previous code in Firebug console
Add some parameters to autocomplete (minLength, disabled, delay, beforeSend, ...)
Set an array on source
In this 2 cases, my input 'understand' my autocomplete function, because it takes some of autocomplete specific attributes
<input id="named_invitees_0_user_id" name="named_invitees[0][user_id]" type="text" value="aaaa" autocomplete="off" class="ac_input">
But NO request is never send when I wrote something on my input (regarding the Firebug Network activity). I think some of the javascript already present on the page is tracking control of this query, but I have no idea what it can be.
And you ?
Edit:
Thanks to your replies. I follow your suggestions :
try to set an array as 'source' : doesn't change anything
remove all the JS of this page : only jQuery-1.4.3 and jQuery-ui-1.8.20 were loaded : doesn't change anything
change the value of minLength to 1 : doesn't change anything
check if the source url returns JSON : it's confirmed
check if the source url is on my website namespace : it's confirmed
Edit2:
Problem found !
There was an hidden JS code somewhere... An old "autocomplete" jquery include. Result : 2 autocomplete were defined.
I delete this hidden code and everything works ok !
Thanks for your replies.
Make sure your source is outputting proper json.
check http://jqueryui.com/autocomplete/#remote for documentation and sample code
here's an example:
$( "#named_invitees_0_user_id" ).autocomplete({
source: "search.php",
minLength: 2
});
use ":" after source!

Jquery Autocomplete clear textbox if no match found

I am using Jquery's autocomplete plugins to show smart search textbox in my application.
To get better Idea plz refere following url
http://docs.jquery.com/Plugins/Autocomplete
Now what I want is, When user goes on typing in the textbox respected filter result get append to the textbox which is fine. If the user types character which doesn't match the result then I want to clear that character.
Means any how I want to force the user to type only those characters that are in the autocomplete result.
Thanks in advance.
Sachin
$('#'+Artist.id).autocomplete(responce, {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:true,
cacheLength:20,
max:20
});
you can override .autocomplete(responce) with the one mention above and set the parameter as per your requirment.
The MustMatch=true solve my problem.

Categories