JSON to array and search & replace inside the array

Question

I have an small callback-function for an jQuery autocompleation input field. The function has 2 parameters: term=the string, typed into the input field and url=the url to the php script which generates suggestions.

The script looked like that:

function m(term,url) {
   var y = '';
   jQuery.get(url, { term:term }, function(data){ });
   return y;
}

Everything you type into the text-field is send to the php script, which returns a list of suggestions.

Inside the function(data){} block, two things should be happened:

encode the JSON string into an Array (which is needed by the JQuery autocomplete as return value). I tried this: y=eval("(" + data + ")");. Is this right? The JSON string which is generates from the PHP side looks like that (example for term="nur")

["nuri al maliki","nursultan nasarbajew","n\u00fcrnberger prozess"] n\u00fcrnberger is the encoded version of "nürnberger"
Highlight the term inside suggested word. Example: input value is "ris" so an suggestion example should be something like sun<b>ris</b>e.

Is there a way to use something like .replace for array?

The application run's under the Yii framework - so I would like to find an solution for that.

Don't know how to completely answer you question (having no experience with jQuery UI), but for your first question...don't use `eval`, use [`$.parseJSON(foo)`](http://api.jquery.com/jQuery.parseJSON/) — Zirak, May 09 '11 at 13:15
You could also use `$.getJSON()`. Seems like the simplest way here. — kapa, May 09 '11 at 13:47

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

its been said that eval is evil you don't need to parse the sting into json just use json_encode

please also look at remote example

for formatting see this thread provided by @DarthJDG

edited May 23 '17 at 12:08

Community

1
1

answered May 09 '11 at 13:18

mcgrailm

16,637
21
80
128

1

+1 to RTFM, you can also have a look at the following SO question for custom formatting: http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results – DarthJDG May 09 '11 at 13:24
i'm still using json_encode on PHP side. I use CJSON::encode from the yii framework. – The Bndr May 09 '11 at 13:35
@The Bndr maybe your json is incorrect ? here is another example that uses jsonp notice they don't need to parsjson http://jqueryui.com/demos/autocomplete/#remote-jsonp when it comes back – mcgrailm May 09 '11 at 13:59
Not sure, but the JSON i receive from PHP side looks like that (example for term="nur") ["nuri al maliki","nursultan nasarbajew","n\u00fcrnberger prozess"]. I think that looks good. – The Bndr May 10 '11 at 08:59
@DarthJDG that SO link i also an interesting way. I'm very new in jQuery/JS. To implement that idea - i simply have to call the function monkyPatchAutocomplete? But i get the error, that "$.ui. is undefined" I think, that some basic knowledge is missing on my side. Sorry. – The Bndr May 10 '11 at 09:03

score 0 · Answer 2 · answered May 09 '11 at 17:25

You can define that the string you receive comes in JSON by:

jQuery.get(url, { term:term }, function(data){ }, "json");

Then in the callback function go through the received items and replace your found string with the wrapped version:

for (i=0, iLen=data.length; i<iLen; i++) {
    data[i] = data[i].replace(new RegExp(term), "<b>$1</b>");
}

score 0 · Accepted Answer · edited May 23 '17 at 12:24

I tried the link from DarthJDG and followed to this SO question: jQueryUI: how can I custom-format the Autocomplete plug-in results?

I think because of insufficient knowledge in Javascript/Jquery/... I was unable to apply that solution to my application. All the time I got the error "$.ui is undefined". The challenge (for me) was: where to place that code in combination with the Yii framework, which one I use.

So I got help from the Yii forum and I like to post the explicit solution here.

You simply have to register that following script. It's importent to register that at POS_LOAD:

Yii::app()->clientScript->registerScript('highlightAC','$.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };',CClientScript::POS_LOAD);

That's it. (Thanks to Antonio from the Yii forum)

JSON to array and search & replace inside the array

3 Answers3