Skip to content

Commit

Permalink
Fixing input resize bug
Browse files Browse the repository at this point in the history
  • Loading branch information
meltingice committed Mar 9, 2012
1 parent 998fe31 commit 76d87f4
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 112 deletions.
6 changes: 5 additions & 1 deletion README.md
Expand Up @@ -40,4 +40,8 @@ $("#example-input").ajaxChosen({

return terms;
});
```
```

## Developing ajax-chosen

ajax-chosen is written in Coffeescript, so there is a Cakefile provided that will perform all necessary tasks for you. Simply run `cake` to see all available commands.
13 changes: 10 additions & 3 deletions docs/ajax-chosen.html
Expand Up @@ -47,11 +47,18 @@
</pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>Finally, call the user supplied callback (if it exists)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">success</span><span class="p">()</span> <span class="k">if</span> <span class="nx">success</span><span class="o">?</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>For some reason, the contents of the input field get removed once you
call trigger above. Often, this can be very annoying (and can make some
searches impossible), so we add the value the user was typing back into
the input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="nx">val</span><span class="p">)</span>
</pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Execute the ajax call to search for autocomplete data with a timer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@timer = </span><span class="nx">setTimeout</span> <span class="o">-&gt;</span>
the input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="nx">val</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Because non-ajax Chosen isn't constantly re-building results, when it
DOES rebuild results (during liszt:updated above, it clears the input
search field before scaling it. This causes the input field width to be
at it's minimum, which is about 25px. </p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>The proper way to fix this would be create a new method in chosen for
rebuilding results without clearing the input field. Or to call
Chosen.search<em>field</em>scale() after resetting the value above. This isn't
possible with the current state of Chosen. The quick fix is to simply reset
the width of the field after we reset the value of the input text.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span><span class="s1">&#39;auto&#39;</span><span class="p">)</span>
</pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Execute the ajax call to search for autocomplete data with a timer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="vi">@timer = </span><span class="nx">setTimeout</span> <span class="o">-&gt;</span>
<span class="nx">chosenXhr</span><span class="p">.</span><span class="nx">abort</span><span class="p">()</span> <span class="k">if</span> <span class="nx">chosenXhr</span>
<span class="nv">chosenXhr = </span><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span>
<span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">afterTypeDelay</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>This code assigns ajax for select tag without multiple option</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">@next</span><span class="p">(</span><span class="s1">&#39;.chzn-container&#39;</span><span class="p">)</span>
<span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">afterTypeDelay</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>This code assigns ajax for select tag without multiple option</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">@next</span><span class="p">(</span><span class="s1">&#39;.chzn-container&#39;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">&quot;.chzn-search &gt; input&quot;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">bind</span> <span class="s1">&#39;keyup&#39;</span><span class="p">,</span> <span class="o">-&gt;</span>
<span class="nv">val = </span><span class="nx">$</span><span class="p">.</span><span class="nx">trim</span> <span class="nx">$</span><span class="p">(</span><span class="err">@</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">)</span>
Expand Down
189 changes: 82 additions & 107 deletions lib/ajax-chosen.js
@@ -1,110 +1,85 @@
(function() {
(function($) {
if ($ == null) {
$ = jQuery;
}
return $.fn.ajaxChosen = function(settings, callback) {
var chosenXhr, defaultOptions, options, select;
if (settings == null) {
settings = {};

(function($) {
if ($ == null) $ = jQuery;
return $.fn.ajaxChosen = function(settings, callback) {
var chosenXhr, defaultOptions, options, select;
if (settings == null) settings = {};
if (callback == null) callback = function() {};
defaultOptions = {
minTermLength: 3,
afterTypeDelay: 500,
jsonTermKey: "term"
};
select = this;
chosenXhr = null;
options = $.extend({}, defaultOptions, settings);
this.chosen();
this.next('.chzn-container').find(".search-field > input").bind('keyup', function() {
var field, msg, val;
val = $.trim($(this).attr('value'));
msg = val.length < options.minTermLength ? "Keep typing..." : "Looking for '" + val + "'";
select.next('.chzn-container').find('.no-results').text(msg);
if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
return false;
}
if (callback == null) {
callback = function() {};
if (this.timer) clearTimeout(this.timer);
$(this).data('prevVal', val);
field = $(this);
if (!(options.data != null)) options.data = {};
options.data[options.jsonTermKey] = val;
if (typeof success === "undefined" || success === null) {
success = options.success;
}
defaultOptions = {
minTermLength: 3,
afterTypeDelay: 500,
jsonTermKey: "term"
options.success = function(data) {
var items;
if (!(data != null)) return;
select.find('option').each(function() {
if (!$(this).is(":selected")) return $(this).remove();
});
items = callback(data);
$.each(items, function(value, text) {
return $("<option />").attr('value', value).html(text).appendTo(select);
});
select.trigger("liszt:updated");
if (typeof success !== "undefined" && success !== null) success();
field.attr('value', val);
return field.css('width', 'auto');
};
select = this;
chosenXhr = null;
options = $.extend({}, defaultOptions, settings);
this.chosen();
this.next('.chzn-container').find(".search-field > input").bind('keyup', function() {
var field, msg, val;
val = $.trim($(this).attr('value'));
msg = val.length < options.minTermLength ? "Keep typing..." : "Looking for '" + val + "'";
select.next('.chzn-container').find('.no-results').text(msg);
if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
return false;
}
if (this.timer) {
clearTimeout(this.timer);
}
$(this).data('prevVal', val);
field = $(this);
if (!(options.data != null)) {
options.data = {};
}
options.data[options.jsonTermKey] = val;
if (typeof success === "undefined" || success === null) {
success = options.success;
}
options.success = function(data) {
var items;
if (!(data != null)) {
return;
}
select.find('option').each(function() {
if (!$(this).is(":selected")) {
return $(this).remove();
}
});
items = callback(data);
$.each(items, function(value, text) {
return $("<option />").attr('value', value).html(text).appendTo(select);
});
select.trigger("liszt:updated");
if (typeof success !== "undefined" && success !== null) {
success();
}
field.attr('value', val);
return field.css('width', 'auto');
};
return this.timer = setTimeout(function() {
if (chosenXhr) {
chosenXhr.abort();
}
return chosenXhr = $.ajax(options);
}, options.afterTypeDelay);
});
return this.next('.chzn-container').find(".chzn-search > input").bind('keyup', function() {
var field, val;
val = $.trim($(this).attr('value'));
if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
return false;
}
field = $(this);
options.data = {};
options.data[options.jsonTermKey] = val;
if (typeof success === "undefined" || success === null) {
success = options.success;
}
options.success = function(data) {
var items;
if (!(data != null)) {
return;
}
select.find('option').each(function() {
return $(this).remove();
});
items = callback(data);
$.each(items, function(value, text) {
return $("<option />").attr('value', value).html(text).appendTo(select);
});
select.trigger("liszt:updated");
field.attr('value', val);
if (typeof success !== "undefined" && success !== null) {
return success();
}
};
return this.timer = setTimeout(function() {
if (chosenXhr) {
chosenXhr.abort();
}
return chosenXhr = $.ajax(options);
}, options.afterTypeDelay);
});
};
})($);
}).call(this);
return this.timer = setTimeout(function() {
if (chosenXhr) chosenXhr.abort();
return chosenXhr = $.ajax(options);
}, options.afterTypeDelay);
});
return this.next('.chzn-container').find(".chzn-search > input").bind('keyup', function() {
var field, val;
val = $.trim($(this).attr('value'));
if (val.length < options.minTermLength || val === $(this).data('prevVal')) {
return false;
}
field = $(this);
options.data = {};
options.data[options.jsonTermKey] = val;
if (typeof success === "undefined" || success === null) {
success = options.success;
}
options.success = function(data) {
var items;
if (!(data != null)) return;
select.find('option').each(function() {
return $(this).remove();
});
items = callback(data);
$.each(items, function(value, text) {
return $("<option />").attr('value', value).html(text).appendTo(select);
});
select.trigger("liszt:updated");
field.attr('value', val);
if (typeof success !== "undefined" && success !== null) return success();
};
return this.timer = setTimeout(function() {
if (chosenXhr) chosenXhr.abort();
return chosenXhr = $.ajax(options);
}, options.afterTypeDelay);
});
};
})($);
2 changes: 1 addition & 1 deletion lib/ajax-chosen.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 76d87f4

Please sign in to comment.