Автоматическое предложение с двумя полями ввода

У меня такая же проблема, как и в этом вопросе:
автоматически предлагать php ajax с двумя полями ввода, не работающими с данным примером кода

Однако при попытке предложения у меня все еще возникает та же проблема.
У меня есть два поля ввода, которые я хотел бы автоматически предлагать из базы данных.
Однако автоматическое предложение появляется только под одним из полей, независимо от того, какое поле набрано дюйм.
Это то, к чему я пришел после предложений в вопросе, ссылка на который приведена вверху.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $('#customer').addClass('load');
        $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#customer').removeClass('load');
            }
        });
        }
    }

function fill(thisValue) {      
    $('#customer').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 10);
}
</script>

<script>
function suggest(inputString){
if(inputString.length == 0) {
    $('#suggestionssearch').fadeOut();
} else {
$('#customersearch').addClass('load');
    $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
        if(data.length >0) {
            $('#suggestionssearch').fadeIn();
            $('#suggestionsListsearch').html(data);
            $('#customersearch').removeClass('load');
        }
    });
    }
}

function fill(thisValue) {      
$('#customersearch').val(thisValue);
setTimeout("$('#suggestionssearch').fadeOut();", 10);
}
</script>

И мои входы:

<input type="text" name="Customer" value="" id="customer" onkeyup="suggest(this.value);" onblur="fill();" class="" style="height:14px; margin-top:2px;" placeholder="Search Customers" autocomplete="off">
<input type="submit">
<div id="suggestcontainer" style="margin-left:2px;">
  <div class="suggestionsBox" id="suggestions" style="display: none;"> 
    <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
  </div>
</div>


<input type="text" name="Customer" value="" id="customersearch" onkeyup="suggest(this.value);" onblur="fill();" class="" style="width:90px; height:14px; margin-top:2px;" placeholder="Customer" autocomplete="off" required="required"/>
<input type="submit" style="float:right;">
<div id="suggestcontainersearch">
  <div class="suggestionsBoxsearch" id="suggestionssearch" style="display: none;"> 
    <div class="suggestionListsearch" id="suggestionsListsearch"> &nbsp; </div>
  </div>
</div>

Я пробовал это со своим скриптом в качестве теста:

<script>
 function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
                    $('#suggestionssearch').fadeOut();
    } else {
    $('#customer').addClass('load');
            $('#customersearch').addClass('load');
        $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#customer').removeClass('load');
                $('#suggestionssearch').fadeIn();
                $('#suggestionsListsearch').html(data);
                $('#customersearch').removeClass('load');
            }
        });
        }
    }

function fill(thisValue) {      
    $('#customer').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 10);


    $('#customersearch').val(thisValue);
    setTimeout("$('#suggestionssearch').fadeOut();", 10);
}
</script>

Это работает в том смысле, что если я ввожу в один из них, появляются оба, очевидно, не то, что мне нужно, но показывает, что он их видит. Похоже, ему не нравится иметь два скрипта.

Любая помощь была бы фантастической. Приветствую всех заранее.

Также, если кто-нибудь знает, как я могу затем прокручивать автоматически предлагаемые результаты с помощью кнопок клавиатуры вверх и вниз, что было бы глазурью на торте !!


person J Allen    schedule 11.01.2013    source источник
comment
Есть ли причина, по которой вы изобретаете велосипед здесь? jQuery UI имеет виджет автозаполнения, который поддерживает удаленный источник данных.   -  person atomman    schedule 11.01.2013
comment
Хорошо, приветствую это. Направлялся в неправильном направлении.   -  person J Allen    schedule 12.01.2013
comment
@atomman Все, что мне сейчас нужно знать, это как отсортировать порядок результатов предложения, чтобы при вводе буквы «M» сначала отображались все результаты, начинающиеся с «M». На данный момент он находит все слова с буквой «М» в любом месте слова, но упорядочивает их в алфавитном порядке, начиная с первой буквы. Если это вообще имеет смысл ... пытался сделать заказ в базе данных select, но безрезультатно.   -  person J Allen    schedule 12.01.2013
comment
Код, который я использую. скрипт: $(function() { $( "#customersearch" ).autocomplete({ source: "/templates/autosuggest/customersuggest.php", select: function( event, ui ) { var selectedObj = ui.item; } }); });и выбор базы данных: $search = $_GET['term']; $letter = substr($search, 0, 1); $req = "SELECT Customer FROM Customers WHERE Customer LIKE '%$search%' ORDER BY Customer LIKE '%$letter%'";   -  person J Allen    schedule 12.01.2013
comment
Взгляните на order by case, и вы, вероятно, сможете решить проблему с этим.   -  person atomman    schedule 12.01.2013
comment
SELECT Customer FROM Customers WHERE Customer LIKE '%$search%' ORDER BY CASE WHEN Customer LIKE '$search%' THEN 1 ELSE 2 END Что-то вроде этого, наверное, не проверял.   -  person atomman    schedule 12.01.2013
comment
Потрясающе, теперь это именно то, что я хочу. ваше здоровье   -  person J Allen    schedule 13.01.2013


Ответы (1)


Я бы предложил использовать jQuery UI, который имеет виджет автозаполнения.

$( "#birds" ).autocomplete({
    source: "search.php",
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

Ответьте на комментарий

Чтобы настроить последовательность, в которой приходят автоматически заполненные предложения, вы можете изменить свой SQL-запрос, чтобы использовать по порядку. Приведенный ниже запрос вернет все результаты, которые начинаются с $search, перед другими результатами, которые просто содержат его в какой-то момент.

SELECT Customer 
FROM Customers 
WHERE Customer LIKE '%$search%' 
ORDER BY CASE 
    WHEN Customer LIKE '$search%' THEN 1 
    ELSE 2 
END
person atomman    schedule 17.01.2013