I'm attempting to do jQuery autocomplete such that I can search for multiple words.
For example, if I have smart, very smart, and super smart in a list I'd like to be able to start typing smar and have all three options show up.
This code will work in the sense that if I start typing from the very beginning like over it will suggest over smart which is correct. But it wouldn't suggest it if I type just smart which is the desired output.
Any idea how I can adjust the code so that I could search and suggest say a substring within the list?
http://jsfiddle.net/UKgD6/390/
var acList = ['smart',
'over smart',
'smart land',
'under smart',
'very smart'
];
$('#ac').autocomplete({
source: function( request, response ) {
var matches = $.map( acList, function(acItem) {
if ( acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return acItem;
}
});
response(matches);
}
});
Your issue can be fixed by changing the indexOf() check. Change === 0 to !== -1. This will return anything that matches, no matter what the index of the search string is within the actual string.
http://jsfiddle.net/UKgD6/391/
Related
I have this string made up for a TMS program... I later found out I want the program to NOT select these postalcodes, it's now matching the string. I want it to be able to select anything between 1000-10000\s*a-zA-Z except for this:
(8388|8389|8390|8391|8392|8393|8394|8395|8396|8397|8398|8400|8401|8403|8404|8405|8406|8407|8408|8409|8410|8411|8412|8413|8414|8415|8420|8421|8422|8423|8424|8425|8426|8427|8428|8430|8431|8432|8433|8434|8435|8440|8441|8442|8443|8444|8445|8446|8447|8448|8449|8451|8452|8453|8454|8455|8456|8457|8458|8459|8461|8462|8463|8464|8465|8466|8467|8468|8469|8470|8471|8472|8474|8475|8476|8477|8478|8479|8481|8482|8483|8484|8485|8486|8487|8488|8489|8490|8491|8493|8494|8495|8497|8500|8501|8502|8503|8505|8506|8507|8508|8511|8512|8513|8514|8515|8516|8517|8520|8521|8522|8523|8524|8525|8526|8527|8528|8529|8530|8531|8532|8534|8535|8536|8537|8538|8539|8541|8542|8550|8551|8552|8553|8554|8556|8560|8561|8563|8564|8565|8566|8567|8571|8572|8573|8574|8581|8582|8583|8584|8600|8601|8602|8603|8604|8605|8606|8607|8608|8611|8612|8613|8614|8615|8616|8617|8618|8620|8621|8622|8623|8624|8625|8626|8627|8628|8629|8631|8632|8633|8635|8636|8637|8641|8642|8644|8647|8650|8651|8658|8700|8701|8702|8710|8711|8713|8715|8721|8722|8723|8724|8730|8731|8732|8733|8734|8735|8736|8737|8741|8742|8743|8744|8745|8746|8747|8748|8749|8751|8752|8753|8754|8755|8756|8757|8758|8759|8761|8762|8763|8764|8765|8766|8771|8772|8773|8774|8775|8800|8801|8802|8804|8805|8806|8807|8808|8809|8811|8812|8813|8814|8816|8821|8822|8823|8830|8831|8832|8833|8834|8835|8841|8842|8843|8844|8845|8850|8851|8852|8853|8854|8855|8856|8857|8860|8861|8862|8871|8872|8880|8881|8882|8883|8884|8885|8890|8891|8892|8893|8894|8895|8896|8897|8899|8900|8901|8902|8903|8911|8912|8913|8914|8915|8916|8917|8918|8919|8921|8922|8923|8924|8925|8926|8927|8931|8932|8933|8934|8935|8936|8937|8938|8939|8941|9001|9003|9004|9005|9006|9007|9008|9009|9011|9012|9013|9014|9021|9022|9023|9024|9025|9026|9027|9031|9032|9033|9034|9035|9036|9037|9038|9040|9041|9043|9044|9045|9047|9050|9051|9053|9054|9055|9056|9057|9060|9061|9062|9063|9064|9067|9071|9072|9073|9074|9075|9076|9077|9078|9079|9081|9082|9083|9084|9086|9087|9088|9089|9091|9100|9101|9102|9103|9104|9105|9106|9107|9108|9109|9111|9112|9113|9114|9121|9122|9123|9124|9125|9131|9132|9133|9134|9135|9136|9137|9138|9141|9142|91439144|9145|9146|9147|9148|9150|9151|9152|9153|9154|9155|9156|9160|9161|9162|9163|9164|9166|9171|9172|9173|9174|9175|9176|9177|9178|9200|9201|9202|9203|9204|9205|9206|9207|9211|9212|9213|9214|9215|9216|9217|9218|9219|9221|9222|9223|9230|9231|9233|9240|9241|9243|9244|9245|9246|9247|9248|9249|9250|9251|9254|9255|9256|9257|9258|9260|9261|9262|9263|9264|9265|9269|9270|9271|9280|9281|9283|9284|9285|9286|9287|9288|9289|9290|9291|9292|9293|9294|9295|9296|9297|9298|9299|9851|9852|9853|9871|9872|9873|9950)\s*[a-zA-Z]{2}
I obviously tried the [^] function and the ?: function but I can't get it working properly.
Just break this string into a set(I think slice function can do that) then sort it and every time you get a value match if it exists in this set or not.
Lets make it easier, I am guessing you are getting numbers in string format of some sort with some form of separation in this case "|".
Step one create array by splinting string based on separator
Step two use filter function that will return a new array based on conditions you provide as shown in example.
Below example takes into consideration edge cases e.g. we are only comparing numbers alphabets are of lesser comparative value to us. What we have to make sure is any comparative value starts with number rest is is all gibberish. So extract number and run bit of magic on that.
Your sting was too long I have used a hypothetical scenario to give you what you want. Rest should be self explanatory in example.
data = '100|999|1000|s1000|10d00|1000f|2500|7500|10000|10001|10500';
dataArray = data.split("|");
dataFiltered = dataArray.filter(function (item) {
extractedNumber = item.match(/^\d+/g);
if(extractedNumber > 999 && extractedNumber <10001) {
return item;
}})
console.log(dataFiltered)
to check on whats being extracted run following and update function as needed.
data = '100|999|1000|s1000|10d00|1000f|2500|7500|10000|10001|10500';
dataArray = data.split("|");
dataFiltered = dataArray.filter(function (item) {
extractedNumber = item.match(/^\d+/);
console.log(extractedNumber);
if(extractedNumber > 999 && extractedNumber <10001) {
return item;
}})
console.log(dataFiltered)
I found what I need from this post but not fully understanding why i cannot change the statement of:
return ['all', event.school].indexOf($('#school_selector').val()) >= 0
to look for the displayed text value of the select using:
return ['all', event.EventType].$("#TypeList option:selected").text() !== '';
When ran while my statement, I get nothing for a calendar grid (get the header only). Seems like followed the same logic, if the selected text is not 'blank', return true, and sort for X.
I am current using the static demo events from the calendar sample code, while I am working on this filter issue. I seen some other ways of doing this, with removing and adding the event sources, but this seems like an easier, and quicker (without all the round trips) of filtering.
Thanks,
Dave
You will need to write it like this:
return ['all', event.EventType].indexOf($("#TypeList option:selected").text()) >= 0
Since you appear to be having trouble understanding the syntax, let's write this long-hand:
var event = { "EventType": "XYZ" }; //dummy event data
var arr = ['all', event.EventType]; //an array, which now contains two items = "all" and "XYZ"
var selectedText = $("#TypeList option:selected").text(); //let's assume the selected text is "XYZ"
var locatedIndex = arr.IndexOf(selectedText); //return the index where "XYZ" appears in the array, if any. As we can see, it should return 1, as it matches the item at the 2nd index (arrays being zero-indexed)
//now check whether the index was 0 or more (i.e. we found the item. It will output -1 if it didn't find it).
//If we found it, return true. If not, return false.
if (locatedIndex >= 0) { return true; }
else { return false; }
I hope that helps to understand what the statement is actually doing.
I need to find occurrences of a string on an array on the client side.
The examples on the JQuery Docs all use number comparisons, for some reason.
Basically I'm trying to do what in the Terminal is as easy as grep pattern < file.txt, but have the data come from an array instead of a file.
This is my code so far. Won't be much help but it'll give you an idea of how I try to accomplish this.
var array = [
'item 1 shalala',
'this is other item',
'more examples',
'dontknowwhatelsetosay',
'wildcard'
];
$( "#submit" ).keydown(function( event ) {
//console.log( "Handler for .keydown() called." );
var result = $.grep(array, function(value, i){
// No idea what to do.
// Will write the array elements that contain the pattern on a div using $('#divId').text(results);
});
});
I usually work on lower level languages, I hope the answer is not too obvious.
EDIT: #submit is on an input text field.
indexOf() will search for a substring in a string, it returns its position when found, or -1 when not found.
var result = $.grep(array, function(value) {
return value.indexOf(pattern) != -1;
}
I have an array that looks like this:
var coll = [
{
prop1:true,
prop2:false,
id:"888399"
},
{
prop1:true,
prop2:true,
id:"/XS-555224"
},
{
prop1:false,
prop2:false,
id:"/DL-555444"
}
]
I want to sort the array so that the element with the ID that begins with "/DL" (for which there will always only be one) always starts at the top. How do I do that?
I don't feel like a custom sort will be the best choice because I don't have to compare elements against one another, I only have to find the one with the "/DL", slice it out, and insert it at the beginning of the array.
However, to do that, I'll still need to iterate over each element of the array to find the element and then perform a couple operations. So then I start thinking that I might as well just do the sort. The problem is how to write the correct condition to compare 2 items and checking the beginning of the ID string. So I figure that I can just simply test for the beginning of the String and return the value myself without comparison.
So I try this:
coll.sort(function(a,b){
var itemA = a.id;
var itemB = b.id;
if(itemA.lastIndexOf("/DL") === 0){
return 1;
}
});
But this comparison isn't working. What is wrong with my custom compare function? Thanks for any helpful tips.
Even though you are just looking for one record to move to the front you still need to check both parameters in the sort, it could be either one.
coll.sort(function(a,b) {
return a.id.indexOf('/DL') === 0 ? -1 : b.id.indexOf('/DL') === 0 ? 1 : 0;
});
Basically we want the '/DL' record to be the 'lowest' value in the array so it will show up first (sort orders things low to high). If a is lower we return negative, if b is lower we return positive. So when sorting if a is the /DL we need to return a negative. If b is the /DL we return a positive. So this expression in english is basically "Is a is our record? -1. If not, is b our record? 1. If neither then 0."
you can try this:
var orderedArr = coll.sort(function(val){
return !val.id.toString().startsWith('/DL');
});
[EDIT]
Once that you have user with IE, you can add this to make your life easier in the future:
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}
so you'll be able to use startsWith now and whenever you want.
I'm trying to make this: http://jsfiddle.net/F9tMx/ work in a way that i can propose to the user who is typing separate suggestions from the availableTags Array.
Basically I'd like to add the same function that is present here on SO when someone is adding a comment to a questions and types the '#' character (a list of user appears if the first character[s] match someone who made activity on the page).
Anyway, I've seen that the minLength parameter is ignored. While the plugin is indeed able to separate words and match against the last word typed, once that the last word is actually empty (last == '') the plugin will propose ALL the elements in the availableTags Array, even if minLength is setted to a number greater than 1.
is there a way I could fix this on your opinion?
here's how I'd like it to behave, but of course it's raising an error
http://jsfiddle.net/F9tMx/3/
Hiya cool using # working demo here: http://jsfiddle.net/67dxH/
so: here is the answer which I replied and helped to someone else: jquery autocomplete #mention
Code segment
this statement will do the trick if (request.term.indexOf("#") >= 0) { rest code is in jdfiddle
.autocomplete({
source: function(request, response) {
if (request.term.indexOf("#") >= 0) {
$("#loading").show();
getTags(extractLast(request.term), function(data) {
response($.map(data.tags, function(el) {
return {
value: el.name,
count: el.count
}
}));
$("#loading").hide();
});
}
},
Have a nice one!
cheers!