Поскольку вы вызываете данные из файла .xhtml, он не сможет отфильтровать результаты, если вы не сможете обновить сценарий на стороне сервера, чтобы принимать и выполнять действия на основе данных, отправленных в него.
Я бы посоветовал вам предварительно собрать статические данные и затем отфильтровать их. Это может выглядеть примерно так:
$( function() {
var myData;
$.get( "http://localhost:8080/myApp/JobSearchItem.xhtml", function( data ){
myData = data;
} );
$( "#searchTextField" ).autocomplete( {
minLength: 2,
source: myData
} );
} );
Предполагается, что ваш xhtml предоставляет массив данных (обычно в формате JSON). Это может быть просто:
[
"Item 1",
"Item 2",
"Item 3"
];
Или что-то более продвинутое:
[{
"label": "Item 1",
"value": 1
},{
"label": "Item 2",
"value": 2
},{
"label": "Item 3",
"value": 3
}];
Если возвращаемые вами данные - это что-то другое: таблица HTML, XML или текст, то использование функции с источником поможет вам. Если вы обновите свой вопрос и предоставите пример данных, мы могли бы предоставить более полный пример или руководство.
Обновление 1
С учетом следующих данных JSON:
[{
"id": "9000",
"pGrade": "0",
"label": "PROGRAMMER TEST 1"
},{
"id": "6000",
"pGrade": "0",
"label": "WEB PROGRAMMER TEST 1"
}];
Это не соответствует стандартному автозаполнению ожидаемых данных. Если вы можете POST-данные к JobSearchItem.xhtml, вы можете сначала отфильтровать их и вернуть данные. Если JobSearchItem.xhtml не принимает POST, тогда я выполню GET всех данных заранее, а затем отфильтрую их. Я включу пример обоих.
POST
Если вы публикуете данные, серверный скрипт должен знать, какие данные вы отправляете, в виде имени и значения переменной. Вы не указали имя переменной в своем примере и не указали содержимое JobSearchItem.xhtml, поэтому очень сложно определить, как работает этот сценарий.
Для этого примера мы будем использовать term, а данные нашего примера будут we. Если бы это была команда GET, она бы выглядела так:
JobSearchItem.xhtml?term=we
Для публикации мы будем использовать предоставленный объект:
{ "term": "we" };
Вот основы:
$(function(){
var cache = {};
$("#searchTextField").autocomplete( {
minLength: 2,
source: function(request, response){
var t = request.term;
if (t in cache){
response(cache[t]);
return;
}
var results = [];
$.ajax({
url: "http://localhost:8080/myApp/JobSearchItem.xhtml",
data: {
term: t
},
dataType: "json",
method: "POST",
success: function( data, status, xhr ) {
$.each(data, function(k, v){
results.push({
label: v.label,
value: v.label,
id: v.id,
grade: v.pGrade
});
});
cache[t] = results;
});
response(results);
});
}
});
});
Итак, в этом случае, если пользователь вводит we, это отправляется в сценарий, который отфильтрует результаты и отправит обратно JSON, который должен выглядеть следующим образом:
[{
"id": "6000",
"pGrade": "0",
"label": "WEB PROGRAMMER TEST 1"
}];
Поскольку автозаполнение ожидает, что объект, содержащий label и value, не может быть просто отправлен напрямую на response(). Используя $.each(), мы можем повторять результаты и настраивать их так, чтобы они форматировались для автозаполнения.
GET
Если ваш obSearchItem.xhtml статичен и предоставляет только список данных JSON, использование GET может быть хорошим способом сбора этих данных. Учтите, что вы можете получить все эти данные заранее, а затем использовать их позже. Это наиболее распространенный способ использования автозаполнения, но данные все еще должны быть в правильном формате.
$( function() {
var myData = [];
$.get("http://localhost:8080/myApp/JobSearchItem.xhtml", function(data){
$.each(data, function(k, v){
myData.push({
label: v.label,
value: v.label,
id: v.id,
grade: v.pGrade
});
});
});
$("#searchTextField").autocomplete({
minLength: 2,
source: myData
});
});
Один из них должен работать.