4

I'm not sure if its possible but I would like to make it so that jquery-ui autocomplete works with multiple keywords for the same result.

Here is an example but its rather old and I couldn't seem to get it to work, even with the older jquery files. I'm not that familiar with jquery and javascript but I can manage to edit existing things.

This is what I currently have (without any adjustments for the multi-keyword):

 <script type="text/javascript"> $(document).ready(function() { NewAuto(); }); function NewAuto() { var products = [ <?php foreach($search__1 as $search) { echo "{value: '". $search['product_name'] ."'}, ";}?> ]; $("#keyword").autocomplete({ source: function(requestObj, responseFunc) { var matchArry = products.slice(); // Copy the array var srchTerms = $.trim(requestObj.term).split(/\s+/); // For each search term, remove non-matches. $.each(srchTerms, function(J, term) { var regX = new RegExp(term, "i"); matchArry = $.map(matchArry, function(item) { return regX.test(item) ? item : null; }); }); // Return the match results. responseFunc(matchArry); }, open: function(event, ui) { // This function provides no hooks to the results list, so we have to trust the selector, for now. var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); var srchTerm = $.trim($("#keyword").val()).split(/\s+/).join('|'); // Loop through the results list and highlight the terms. resultsList.each(function() { var jThis = $(this); var regX = new RegExp('(' + srchTerm + ')', "ig"); var oldTxt = jThis.text(); jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); }); } }); } </script>
Improve this question
4
  • What do you mean by 'multi-keyword'? Can you give some example terms? Commented May 15, 2013 at 11:36
  • Your linked example just works fine, no? Commented May 15, 2013 at 11:37
  • I found that example on the internet, but cant make it to work in my code and the multi-keyword, if you look at the example you can see that when you type "win" and "day" you get "win the day" Commented May 15, 2013 at 13:12
  • Your jsFiddle is working fine. I didnt got anu error. Post your full code and error u got. Commented May 16, 2013 at 8:29

2 Answers 2

Reset to default
3

If i understand ur question correctly, u want to show list which match multiple word of same sentence.

Click here for example 

 <html> <head> <title>Testing</title> <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .srchHilite { background: yellow; } </style> <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { NewAuto(); }); function NewAuto() { var availableTags = ["win the day", "win the heart of", "win the heart of someone"]; alert(availableTags); // alert = win the day,win the heart of,win the heart of someone $("#tags").autocomplete({ source: function(requestObj, responseFunc) { var matchArry = availableTags.slice(); // Copy the array var srchTerms = $.trim(requestObj.term).split(/\s+/); // For each search term, remove non-matches. $.each(srchTerms, function(J, term) { var regX = new RegExp(term, "i"); matchArry = $.map(matchArry, function(item) { return regX.test(item) ? item : null; }); }); // Return the match results. responseFunc(matchArry); }, open: function(event, ui) { // This function provides no hooks to the results list, so we have to trust the selector, for now. var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|'); // Loop through the results list and highlight the terms. resultsList.each(function() { var jThis = $(this); var regX = new RegExp('(' + srchTerm + ')', "ig"); var oldTxt = jThis.text(); jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); }); } }); } </script> </head> <body> <div> <label for="tags"> Multi-word search: </label> <input type="text" id="tags" /> </div> </body> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Looks like this also shuts down the moment you type a second word, tried it bout in my code and the example, but no go =(
Can u explain exactly what u want?
If you were to type "win" and "day" together normally you wouldn't get a result, but I want to still get the result "win the day"
K I got it now. I will answer as soon as possible.
Ur example (jsfiddle.net/Q4jy9/1) working fine to me. I didnt got any error. I have updated my answer(ur fiddle example). Check it out. Still u didnt get it worked post ur full code. so we can help u.
|
0

Im getting city area name form DB and displaying it using autocomplete.

 function GetLocalityList() { var LocalityArray = []; $.post("MvcLayer/Index/GetLocalityList", { CityID: $('#sltCity').val() }, function(data) { // My sql query will be like this select LocalityID, CityID, LocalityName from tablename where CityID = 20 // Here (data) is array format. Like this // [{"LocalityID":9397,"CityID":55,"LocalityName":"Adugodi"},{"LocalityID":9398,"CityID":55,"LocalityName":"Aga Abbas Ali Road"},{"LocalityID":9399,"CityID":55,"LocalityName":"Agaram"},{"LocalityID":9400,"CityID":55,"LocalityName":"Agrahara Dasara Halli"},{"LocalityID":9401,"CityID":55,"LocalityName":"Agrahara Dasarahalli"},{"LocalityID":9402,"CityID":55,"LocalityName":"Airport Exit Road"},{"LocalityID":9403,"CityID":55,"LocalityName":"Horamavu"},{"LocalityID":9404,"CityID":55,"LocalityName":"Hosakere Halli"},{"LocalityID":9405,"CityID":55,"LocalityName":"Hennur"},{"LocalityID":9406,"CityID":55,"LocalityName":"Hesaraghatta"},{"LocalityID":9407,"CityID":55,"LocalityName":"HKP Road"},{"LocalityID":9408,"CityID":55,"LocalityName":"HMT Layout"},{"LocalityID":9409,"CityID":55,"LocalityName":"Hongasandra"},{"LocalityID":9410,"CityID":55,"LocalityName":"Hoody"},{"LocalityID":9411,"CityID":55,"LocalityName":"Hayes Road"} ] $.each(data, function(key, value) { LocalityArray[key] = value.LocalityName; }); $("#txtLocality" + SelectedTab).autocomplete({ minLength: 1, source: function(req, responseFn) { // \\b show each match letter in each word of list // ^ show each match letter in whole word of list var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(req.term), "i"); var a = $.grep(LocalityArray, function(item, index) { return matcher.test(item); }); responseFn(a); } }); }, 'json' ); }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.