meltingice / ajax-chosen Goto Github PK

Is there a possibility to add some custom fields to request that is being sent to backend?

hello,

what's the license of this library?

I can't find in README or source code.

thx

Using jQuery 1.6.4, this causes an infinite loop somewhere deep inside jQuery and eventually gets terminated by the browser (Firefox). This is very simple data retrieval of only a few items, so I'm surprised this plugin is broken. I'm using the latest zipball Chosen and the latest zipball of this project. Chosen worked fine by itself (but sluggishly) so I was looking for possible AJAX solutions. This seemed like it would fit the bill perfectly but it unfortunately freezes. Firebug confirms that valid JSON data is being returned from the server. I followed the example demo you provided pretty closely.

When you have multiple elements on the same page, once you add options to the first input, the second will no longer find the results.

Is possible to make universal .ajax-chzn-select class, which will be loading URL attribute from HTML element?

Something like this:

$(".ajax-chzn-select").ajaxChosen
    method: "GET"
    dataType: "json"
    url: $(this).data("url")
  , (data) ->
    terms = {}
    $.each data, (i, val) ->
      terms[val._id] = val.name + " <span class='slug'>(" + val.slug + ")</span>"
    terms

When selecting the first result, chosen doesn't trigger 'change' on the select. This breaks anything bound to the change event.

WooCommerce apparently uses ajaxChosen and I've been noticing that when the results are returned it (unfortunately) allows you to add the same selection multiple times. Is there some way to prevent the items which are already selected from being displayed in the dropdown list?

It seem the beforeSend function is causing error compiling, here is my code:

$("select[name=element_id]").ajaxChosen({
type: 'GET',
url: '',
dataType: 'json'
},
// beforeSend: function(xhr, s) {
// s.data += "&newProp=newValue";
// },
function (data) {
console.log($(this));
var terms = {};
$.each(data.states, function (i, val) {
terms[i] = val;
});

return terms;

});

Is it possible to create a new tag based on the current HEAD and publish the newly created version to the official bower repository (using bower register)?

The upstream/relied-upon Chosen library does not either though I have created a pull request to fix that (along with issue #1601.

A patch to ajax-chosen is fairly straight forward and convenient for users.

Hello at all,

I want to install this nice plugin. But I fount noting for this topic.

Hope someone can help me.

Thanks Michael

Currently options loaded with Ajax are replacing the static ones that were already matched.
Please enable appending the loaded options to the ones already matched:

 Optgroup A
   Option 1
   Option 2
 Optgroup B
   Option 3
   Option 4
 Options loaded from server
   Option loaded with ajax 1
   Option loaded with ajax 2

Hi good day, I want contribute with this

I needed, search a item by a property ( in backend) and show the name of the item with this property

I.E:

• Search: C++
• response: [{name: "My name to show, ability: "java, C++" }]
  In the documentacion, i don't find it so... i want contribute with this

$('.chosen-ajax').ajaxChosen({
    type: "GET",
    url: "my_path",
    dataType: 'json'
  }, function(data){
     var result = [];    
     for (var i = data.length - 1; i >= 0; i--) {
      var value = data[i];
      /* Only need add search_text with the property */
      result.push({"value" : value.id, "search_text" : value.property  ,text: value.name})
     }
     return result;
   }
)

The important Thing is: search_text

http://dev.meltingice.net/ seems it is deleted? =(

I'm trying to use ajax-chosen with in ASP.NET MVC3.

Normally I 'stringify' my data (using JSON.stringify from json2.js) before posting it so that ASP.NET can understand it.

I can't see any way of controlling how the data is posted to the server. Is there a way to stringify the data?

Thanks,
Chris

In my fork, I am using a merge of several forks that abstracted the ajax request out to a callback so that the developer may handle the ajax call themself, in addition to the response handling.

Since I added an 'initialQuery' which fires an ajaxRequest when opened, I simply reuse this callback. However to differentiate between the normal request and the initial request, I'm passing a reference to the event that triggered the call, or a text name of it (such as type vs click, etc).

I've been sort of busy but I would like to implement a variation upon scroll where when you reach the bottom of the options, it fires a second request with pagination information, and again, taking advantage of the event information to help the developer know which use-case this is, he can modify the request accordingly.

If you do not wish to implement my fork, I will have to look into continually merging your updates (somehow) into my version, as yours currently may be somewhat limiting.

Hi

I've been tinkering all afternoon with ajaxChosen, because I love Chosen, but my option value sets are getting too large. I've also experimented with select2, but it's just too darn slow.

So, I've got the newest version of chosen (1.1.0), and the latest version of ajaxChosen. I initialize ajaxChosen as follows:

$("#add_people").ajaxChosen({
type: 'GET',
minTermLength: 3,
afterTypeDelay: 300,
dataType: 'json',
url: 'http://cmcrm.chocolata.be/content/people.php?action=list_options'
}, function (data) {
var results = [];
$.each(data, function (i, val) {
results.push({ value: val.value, text: val.text });
});
return results;
});

My script has access to this URL, and there is no XSS-prevention going on since my script is on the same domain as the remote url.

The format of my JSON is as follows:
[{"value":3,"text":"Valerietje Mortelmans (Actief)"},{"value":9,"text":"Olivier Hopchet (Actief)"},{"value":13,"text":"Wieland Rits (Actief)"},{"value":14,"text":"Melissa Seiffert van der Merwede (Actief)"},{"value":15,"text":"Guillaume de Valensart (Actief)"},{"value":18,"text":"Xavier Cloet (Actief)"},{"value":19,"text":"Brent Lammens (Actief)"},{"value":21,"text":"Coralie Libert (Actief)"},{"value":22,"text":"Laetitia Theus (Actief)"},{"value":23,"text":"Evelien Mollet (Actief)"},{"value":24,"text":"Feya Smets (Actief)"},{"value":25,"text":"Michelle Warneke (Actief)"},{"value":26,"text":"Carolyn Spaenjaers (Actief)"},{"value":27,"text":"Evelien Raes (Actief)"},{"value":28,"text":"Ange Luyten (Actief)"}]

This is what my select box looks like after initialisation:
Mensen toevoegen

I see that chosen has initialized but when I start typing I immediately get "No search results for KEYWORD". There are no errors in my console.

Can anyone assist so that I don't waste more time on this? :-) Would love to use this. Thanks!

Hello,
I am using your plugin. I have very annoying problem. When the usre type fast
(so web requests are being sent). Some times the searchbox displays incorrect filters - some chacters erased
e.g. the user type "ct xray" i will ses "crray"
Any idea what can be wrong? did you had such an isssue before?

Sigal

I want to be able to change the options list in ajaxChosen dynamically as the user, uses the page.

Can someone give me a clue

I have debugged it in the debugger to look at the object structure of the select element.

And I can't figure out where I can access the options.

Some of the Various forms I have tried
$([element]).chosen('options','url',[value]);
$([element]).ajaxChosen('options','url',[value]);
$([element]).data('chosen','options','url',[value]);
$[element]).data('ajaxChosen','options','url',[value]);
$([element]).ajaxChosen().options.url = [value];
$([element]).chosen().options.url = [value];

I for the life of me can't figure this out.

Any help is truly appreciated!

you may be interrested by https://github.com/mobyle2/mobyle2.core/blob/master/src/mobyle2/core/static/js/ajax-chosen.js.

I do not have the time now to do a pull request.
Just for information, it filters already in values and also have better code to check that the user has finished its words (stolen from autocomplete plugin)

Hi there,

First off, Great addition to chosen! I've added a comment with link to this repo, here: harvesthq/chosen#79

It works great the only issue I see is some weird styling issue, where the text field shrinks to ~4 or 5 characters as you type in a search term, so that you only see the first few letters. It happens for me if you type in a long state name on your demo page here: http://dev.meltingice.net/ajax-chosen/ using Chrome, Safari, Firefox, etc.

Choosen nicely supports deselection in single select mode. You only have to ensure that the first option tag is empty. Unfortunately, this no longer works with ajax-choosen.

It would be great if that was included.

If you put a console.log inside the success callback (options.success), you'll notice that you're rebinding the callback on every keyup event. Which means on the first autocomplete, your callback is called once, second time twice, then three times, etc.

This is probably not dangerous, but possibly a performance issue and could lead to subtle bugs.

In either case, the success callback should only be bound a single time, when the box is initialized. The only reason you can't do that is because it currently relies on the value of the box in order to put it back after clearing it. The box seems to be cleared by select.trigger("liszt:update") - not sure why that clears the box, or why we can't just leave the search term in the box if nothing is autocompleted.

Not sure what to do about this without understanding why the trigger is clearing out the box, but happy to help if someone points me in the right direction. Thanks!

When a user inputs a term I return the results order by relevance
For example a ajax search returns the following json string:

{"10419":"Ajax","861":"Jeroen Slop","6244":"Barbara Stork","2109":"Antje Dammer","2295":"Ivo Trijbits","3885":"Marcus Keane","2172":"Alfredo Arroyo","3311":"Pascale Vos","5183":"Barbara Traanberg","277":"Cindy Snabel"}

But in the chosen select the results are ordered by the key/value of the option.

e.g.

Cindy Snabel
Jeroen Slop
Antje Dammer
etc...

is there anyway around this? am I the only one having this problem?

In your demo, the search result order doesn't make sense.

For example, when you type wyo, you don't even get Wyoming in the list. When you type wyom, you get Wyoming in the list, but it's not on top of the list. Finally, when you type wyomi, you get Wyoming at the top of the list.

The weirdest part is that the other results that show up besides Wyoming don't even have the term wyo in them.

Although it might be necessary to keep track of what search keywords fired off an ajax request so that you may return a cached result (as this could have changed), I DO recommend that you merge all returned result sets together.

I realize there may be an overhead concern with merging larger and larger resultsets, however if you typed in "Jon" and then "Billy" and then "Jon" again, there is no reason you shouldn't immediately start filtering and seeing "Jon" the second time around. This would be instead of discarding the rows every time the chosen widget is closed.

I'd like to set the no_results_text, and disable_search_threshold options provided by chosen. Is there any way I can achieve this? Perhaps you should add a third argument for this to ajaxChosen() ?

So I've been working on some enhancements and went perusing through the assorted forks of ajax-chosen to see who had the most fleshed out version. I settled on a fork which seemed to integrate all the features that were merely touched upon in all the other forks, and merged in a fix from some other branches.

On top of that I added a very new feature: initialQuery

initialQuery allows you to populate the dropmenu when the chosen widget is first opened (on click or focus). This way you can show for instance the first 50 records and then start firing subsequent ajax requests for 10 records at a time.

Extra data is passed to the callback function so that you can determine how the ajax is being triggered (focus vs keyup) allowing you to modify the request accordingly.

I will subsequently be adding 2 major features in the near future

1. I will be adding ajax-powered pagination when you scroll through the list. Our company has thousands of records and they want to have it so when you scroll to the bottom of the widget, another ajax request is fired pulling in another batch of records.
2. Rich formatting in the dropmenu. This will probably be applied to the core widget however, but will allow you to add things such as images, newlines, bold text, etc to each item in the dropmenu.

Hey, what about a challenge? :)

What I need to do is to have an option to trigger a search from my program code - followed by selecting an item from the list.

Example:

The list contains the items

• 1. peach
• 2. pineapple
• 3. passiflora

The user clicks on a button somewhere in the page. That button should trigger an event and force the list to be set to "apple"

ajaxChosen would need to do an ajax request to fetch the id and the item "apple", modify the list and then select the specified item.

I will try to solve that myself now, but I'll do it in JavaScript. No time to learn CoffeeScript now.

I upgraded to CoffeeScript 1.3.1 and tried compiling the source. I get the following error.

➜  ajax-chosen git:(master) ✗ coffee --version
CoffeeScript version 1.3.1

➜  ajax-chosen git:(master) ✗ cake compile     
12 Apr 14:11:20 - Building lib/ajax-chosen.js
12 Apr 14:11:20 - Appending 1 files to src/build.coffee
12 Apr 14:11:20 - [1] ajax-chosen.coffee
12 Apr 14:11:20 - Error: Command failed: The "sys" module is now called "util". It should have a similar interface.
Error: In ajax-chosen.js, the variable "success" can't be assigned with ?= because it has not been defined.
    at Assign.compileConditional (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:1635:15)
    at Assign.compileNode (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:1497:23)
    at Assign.compile (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:48:21)
    at Block.compileNode (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:311:23)
    at Block.compileWithDeclarations (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:395:19)
    at Code.compileNode (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:1800:35)
    at Code.compile (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:48:21)
    at /usr/local/lib/coffee-script/lib/coffee-script/nodes.js:864:29
    at Call.compileNode (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:867:8)
    at Call.compile (/usr/local/lib/coffee-script/lib/coffee-script/nodes.js:48:21)

The error is on line 67 of ajax-chosen.coffee. See the CoffeeScript changelog for why an error is being thrown here.

It seems that ?= might not be necessary in this case, and that a simple = assignment would suffice.

Chosen no longer uses liszt: events, it now uses chosen: instead.

• Does not support partial file downloads
• No smart server pre-search: return subset
• freezes worse than the main chosen.js,
• very restricted data structures ...

Hi,

i am trying to implment ajax-chosen in my webpage using a webservice so that i can populate the select control with values when the user types in the search box. the dropdown should be loaded on the page load and then the user can filter out the options. Please find my code below:-

the webservice is not getting called am i missing something ? i need to pass whatever is typed in the search box and pass it to the webservice.

i am using Chosen 1.0.0 and ajax-chosen pulgin is also installed.

Regards,
Vineet

Dears,

my data is represent [{id: "#", value: "#"}] and i'd like to show the value as a label and choosed option. but the value of the input to be set to the id.

how to apply this. as a way of the select method in jqueryui autocomplete.

Thanks.